0

关于将参数传递给下面的函数，我有以下问题。

目前的做法：

当鼠标悬停在两个图像之间时，我就有了过渡效果。我需要每个图像 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");

});

一个setupFade函数，但有两个调用。

于 2013-02-04T09:00:29.500 回答
0

Here are two options:

Just add a class to your images, and use this function:

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

Added class:

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

Or, check for <a> tags where the class begins with "fade_image", instead of adding a class to all the images:

$(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 回答