Animer l'opacité sur le vol stationnaire (jQuery)

Nous avons un lien:

<a href="#">
    Some text
    <span style="width: 50px; height: 50px; background: url(image.png); overflow: hidden; opacity: 0;"></span>
</a>

Et nous voulons changer l'opacité de <span> avec un peu d'animation, lorsque le lien est planait.

Comment pourrions-nous le faire?

OriginalL'auteur Happy | 2010-01-24

  1. 9

    Comme ceci:

    $('a:has(span)').hover(
    function() { $('span', this).fadeIn(); },
    function() { $('span', this).fadeOut(); }
);

    OriginalL'auteur SLaks

  2. 46

    Une autre solution possible:

    $("a span").hover(function(){
    $(this).stop().animate({"opacity": 1});
},function(){
    $(this).stop().animate({"opacity": 0});
});

    Si vous utilisez fadeOut(), la durée va s'effondrer, de cette façon il ne sera pas

    MODIFIER

    C'est beaucoup mieux:

    $('a:has(span)').hover(function() { 
    $('span', this).stop().animate({"opacity": 1}); 
},function() { 
    $('span', this).stop().animate({"opacity": 0}); 
});
    Le sélecteur est mauvais - il veut que l'effet d'apparaître lorsque le lien est planait, pas la portée. Cependant, vous avez un bon point.
    Vous avez un bon point aussi.
    Nice code, ce qui a le mieux fonctionné pour moi des réponses ici.

    OriginalL'auteur Raspo

  3. 3

    Utilisation .fadeTo():

    $( 'a' ).hover(
    function() { $( this ).fadeTo( 'fast', '1'); },
    function() { $( this ).fadeTo( 'fast', '.4'); }
);

    De démonstration: voir violon

    L'original de votre logique est encore transmis. +1

    OriginalL'auteur Nabil Kadimi