0

以下の関数にパラメータを渡すことに関して、次の質問があります。

現時点での方法：

マウスをホバーしているときの2つの画像間の遷移効果があります。各画像のパスが異なり、すべての画像を区別するために異なるクラスを使用するため、画像ごとに1つの関数が必要です。

Javascript：

</script>    
    $(function() {
    $(".fade_image1")

    .find("span")
        .hide()
        .end()
        .hover(function() {
            $(this).find("span").stop(true, true).fadeIn();
        }, function() {
            $(this).find("span").stop(true, true).fadeOut();
         });
    });
    $(function() {
    $(".fade_image2")

        .find("span")
        .hide()
        .end()
        .hover(function() {
            $(this).find("span").stop(true, true).fadeIn();
                     }, function() {
            $(this).find("span").stop(true, true).fadeOut();
        });
    });
</script>

HTML：

<div>
  <a href="#" class="fade_image1">Image<span></span></a>
</div>
<div>
  <a href="#" class="fade_image2">Image<span></span></a>
</div>

CSS：

.fade_image1{
display: inline-block;
position: relative;
text-indent: -9999px;
width: 303px;
height: 605px;
background: url(images/20130128_UK_Colour-Campaign_cropped_02.jpg) no-repeat;
}
.fade_image1 span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(images/images-rollover/20130128_UK_Colour-Campaign_cropped-rollover_02.jpg) no-repeat;
/*background-position: -50px 0;*/
}
.fade_image2{
display: inline-block;
position: relative;
text-indent: -9999px;
width: 608px;
height: 302px;
background: url(images/20130128_UK_Colour-Campaign_cropped_03.jpg) no-repeat;
}
.fade_image2 span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(images/images-rollover/20130128_UK_Colour-Campaign_cropped-rollover_03.jpg) no-repeat;
/*background-position: -50px 0;*/
}

だからここに私の質問があります、すべての画像に対して1つのjavascript関数だけを機能させることによってこれを単純化するにはどうすればよいですか？画像のパスを関数に渡す必要があることは理解しています。そうすれば、JQueryのcssを使用できますが、それ以上はわかりません:)

だから私を助けてください:)

4

2 に答える 2

0

これはあなたのニーズに合うはずです：

$(function() {

    function setupFade(selector) {
        $(selector)
        .find("span")
        .hide()
        .end()
        .hover(function() {
            $(this).find("span").stop(true, true).fadeIn();
        }, function() {
            $(this).find("span").stop(true, true).fadeOut();
        });
    }

    setupFade(".fade_image1");
    setupFade(".fade_image2");

});

1つのsetupFade関数ですが、2つの呼び出しがあります。

于 2013-02-04T09:00:29.500 に答える
0

2つのオプションがあります。

画像にクラスを追加して、次の関数を使用するだけです。

$(function() {
$(".fade_images")
    .find("span")
    .hide()
    .end()
    .hover(
        function() {
            $(this).find("span").stop(true, true).fadeIn();
        }, function() {
            $(this).find("span").stop(true, true).fadeOut();
        }
    );
});

追加されたクラス：

<a href="#" class="fade_image1 fade_images">Image<span></span></a>

または、すべての画像にクラスを追加する代わりに<a>、クラスがで始まるタグを確認します。"fade_image"

$(function() {
$('a[class^=fade_image]') //<-- for all <a> tags whom class starts with `fade_img`. use *= instead of ^= if you need to filter for "Contains" instead of "Starts with".
    .find("span")
    // Etc...
于 2013-02-04T09:01:09.540 に答える