twitter like current row effect in jquery?
I am iterating div and edit,delete buttons within it... How to hide the link buttons on mouseout and show them on mouse over exactly like twitter........
$.eac开发者_开发问答h(data.Results, function() {
divs += '<div class="resultsdiv"><a href="Clients\Details' + this.ClientId + '">Edit</a><br/><a href="Clients\Details' + this.ClientId + '">Delete</a></div>';
});
$("#ResultsDiv").append(divs);
$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").hover(function() {
$(this).addClass("resultshover");
}, function() {
$(this).removeClass("resultshover");
});
and the css is:
.resultseven { background-color: #EFF1f1; }
.resultshover { background-color: #F4F2F2; cursor:pointer; }
You can find the children and animate them using .children()
, like this:
$.each(data.Results, function() {
divs += '<div class="resultsdiv"><a href="Clients\Details' + this.ClientId +
'">Edit</a><br/><a href="Clients\Details' + this.ClientId +
'">Delete</a></div>';
});
$("#ResultsDiv").append(divs);
$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").hover(function() {
$(this).addClass("resultshover").children('a').stop(true, true).fadeIn();
}, function() {
$(this).removeClass("resultshover").children('a').stop(true, true).fadeOut();
});
Or, the shorter version using .animate()
, hide them initially in CSS and do this:
$(".resultsdiv").hover(function() {
$(this).toggleClass("resultshover")
.children('a').stop(true, true).animate({opacity: 'toggle');
});
You can loop through the children and hide them
$.each(data.Results, function() {
divs += '<div class="resultsdiv"><a href="Clients/Details' + this.ClientId + '">Edit</a><br/><a href="Clients/Details' + this.ClientId + '">Delete</a></div>';
});
$("#ResultsDiv").append(divs);
$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").children().hide();
$(".resultsdiv").hover(function() {
$(this).addClass("resultshover");
$(this).children().show();
}, function() {
$(this).removeClass("resultshover");
$(this).children().hide();
});
you could,
$.each(data.Results, function() {
var divs = '<div class="resultsdiv"><a href="Clients\Details' + this.ClientId + '">Edit</a><br/><a href="Clients\Details' + this.ClientId + '">Delete</a></div>';
$(divs).hide();
$(this).append(divs);
$('.resultdiv:even').addClass('resultseven');
$(this).hover(function() {
$(this).find('.resultsdiv').show().addClass('resultshover');
},
function() {
$(this).find('.resultsdiv').hide().removeClass('resultshover');
}
);
});
i am assuming that your data.Results
are list of elements. maybe li
精彩评论