Geek asks and answers

JQuery: fade in / out + animated elements

I use jQuery to fade out some elements and change the opacity of others.

  $(function(){

        $('.image').each(function() {
            $(this).hover(
                function() {
                    $(this).stop().animate({ opacity: 0.3 }, 'slow');
                    $(this).siblings().fadeIn('slow');
                },

               function() {
                   $(this).stop().animate({ opacity: 1 }, 'slow');
                   $(this).siblings().fadeOut('slow');
               })
            });
        });

You can see the full code at http://projects.klavina.com/stackoverflow/01/ (I also use the jQuery Masonry plugin on the page).

I am new to JS / jQuery and the above code does not work well unless I move the .image element very slowly. When I navigate through elements faster, captions above images are displayed even when I have already navigated through another element. How can i remove this? That is, captions should disappear only when I still hang this particular element.

"z-index: 100;" , . "z-index: 100;" , .

, / IE. ? IE, , ( ).

!

+3
3

.siblings().stop() $(this).stop() ( ).

, , , , , (, , , ). - , .fadeIn() .fadeOut() - fadeIn() opacity:1 - , fadeOut() .

, animate({opacity:1},'slow') fadeIn('slow') - ( ) .fadeTo('slow',1) (). ( , fadeTo, - , , ).

, fadeTo() - , , animate(), - . (, se animate(), css.)

, :

$(function() {
    $('.image').each(function() {
        $(this).hover( function() {
            $(this).stop().fadeTo('slow',0.3)
                .siblings().stop().fadeTo('slow',1);
        }, function() {
            $(this).stop().fadeTo('slow',1)
                .siblings().stop().fadeTo('slow',0);
        });
    });
});

jsFiddle: http://jsfiddle.net/coltrane/XstpE/
( : , , , ).

: .each(), , , .

( "" jQuery):

$(function() {
    $('.image').hover(function() {
        $(this).stop().fadeTo('slow', 0.3)
            .siblings().stop().fadeTo('slow', 1);
    }, function() {
        $(this).stop().fadeTo('slow', 1)
            .siblings().stop().fadeTo('slow', 0);
    });
});

, jQuery . ( jsFiddle ( ), each()).

Edit

OP , ( ) mouseleave, . , .

, "" , hover() . , ( ), . - , .

, hover() ( , ), . $('.entry'). :

$(function() {
    $('.entry').hover(function() {
        $('.image',this).stop().fadeTo('slow', 0.3)
            .siblings().stop().fadeTo('slow', 1);
    }, function() {
        $('.image',this).stop().fadeTo('slow', 1)
            .siblings().stop().fadeTo('slow', 0);
    });
});

jsFiddle

+4

, "" . "" , .

, ,

$('.image').mouseleave(function() {
    $(this).stop();
});
0

Try using mouseenter () and mouseleave () instead of hover ().

$(function(){
    $('.image').each(function() {
        $(this).mouseenter( function() {
            $(this).stop().animate({ opacity: 0.3 }, 'slow');
            $(this).siblings().fadeIn('slow');
        })
        .mouseleave( function() {
            $(this).stop().animate({ opacity: 1 }, 'slow');
            $(this).siblings().fadeOut('slow');
        });
    });
});
0
source

More articles:


All Articles