Question

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

目前这样做的方式：

当鼠标悬停在两个图像上时，我已经获得了这种过渡效果。我需要每个图像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，但我不知道更多：）

所以请帮帮我:)。

Answer 1

这应该符合您的需求：

$(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个功能，但有两个电话。

Answer 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...

通过编写适当的javascript函数简化我的代码

2 个答案: