0

ここで私のコードは完全に機能しますが、マウスがボタンの上にあるときにimgタグと新しいクラスからの変更がスムーズにフェードインすることを望んでいます。それは可能ですか？

jQuery：

        $('.hover').mouseenter(function() {
            $(this).next().removeClass('hide')
            var src = $(this).attr("src").match(/[^\.]+/) + "_hover.svg";
            $(this).attr("src", src)
        });     

        $('.hover').mouseleave(function() {
            $(this).next().addClass('hide')
            var src = $(this).attr("src").replace("_hover.svg", ".svg")
            $(this).attr("src", src)
        });

HTML：

<div class="facebook">
           <a href="#">
            <img class="fb_logo hover" src="img/facebook_logo.svg" alt="Facebook Logo" />
            <img class="fb_text hide" src="img/facebook_text.svg" alt="Facebook Text" />
          </a>
</div>
4

1 に答える 1

0

これがあなたが探しているものであるかどうかはわかりませんが、単純なフェードイン/フェードアウト画像スイッチャーが必要なようです。これが1つのアプローチです：

<div class="facebook">
<a href="#">
    <!-- Start with one image on the page. We'll change the src attribute with JavaScript -->
    <img src="https://dmcohen01.files.wordpress.com/2012/03/5b2145c4aakermit.jpg"/>
</a>
</div>




// Now for the JavaScript:
$('img').mouseenter(function() {
    var self = $(this);
    self.fadeOut('slow', function(){
        self.attr('src', 'http://images4.wikia.nocookie.net/__cb20100831164753/muppet/images/7/70/Firstmatepiggy.jpg').fadeIn('slow');
    });
});

$('img').mouseleave(function(){
    var self = $(this);
    self.fadeOut('slow', function(){
         self.attr('src', 'https://dmcohen01.files.wordpress.com/2012/03/5b2145c4aakermit.jpg').fadeIn('slow');
    });
});

これが機能しているフィドルです：http：//jsfiddle.net/brianeoneill/uTpWp/

于 2013-03-07T16:47:28.703 に答える