Why i am unable to set z-index of div using jquery?
I have created a sample
http://jsbin.com/eqiti3 here we have three divs. Now, what i want to do is: on cl开发者_开发知识库icking of any div it should come on the top of other div then fade and then back to its original position. This is what i am using:$(".box").click( function () {
var zindex = $(this).css('z-index');
/* this too is not working
$(this).css('z-index',14);
$(this).fadeTo ( 'slow', 0.5 ).fadeTo('slow', 1 )
$(this).css('z-index',zindex);
*/
$(this).css('z-index',14).fadeTo ( 'slow', 0.5 ).fadeTo('slow', 1 ).css('z-index',zindex);
} );
provided $(this).css('z-index',14)
this alone is capable of making the div to come over other divs.
Use the callback
$(this).css('z-index',14)
.fadeTo('slow', 0.5 )
.fadeTo('slow', 1, function(){
$(this).css('z-index',zindex);
});
The 3rd parameter is a callback function, it will run when the animation ends.
Revision #3 on jsBin.
change your code to this:
$(".box").click( function () {
var zindex = $(this).css('z-index');
$(this).css('z-index',14).fadeTo ( 'slow', 0.5 ).fadeTo('slow', 1, function(){
$(this).css('z-index',zindex);
});
});
You can't chain the .css()
method after fadeTo()
, because those fx
functions run asyncronously and therefore, .css()
was executing immediately.
That's why all fx
methods do offer callbacks which fire when finished.
See this in action: http://jsbin.com/eqiti3/2/edit
Set background:'white'; it is solved for me
精彩评论