Question

我有一个菜单系统的代码，其中包含很多在每个菜单项中都很常见的部分。

我正在努力将公共代码放入我可以根据需要调用的函数中 - 所以我不需要有数百行相同的代码。

任何人都可以帮我指出正确的方向吗？

$("#test1").hover( function() {

    $(this).animate({
        width: "599px",
        left: "0px",
        height: "168px",
        backgroundColor: "#d7df23",
        opacity: 0.95
    }, 100).css({'z-index': "10", 'border-top': 'none'});

// Start of common code     
        $(this).find(".thumb").animate({
            width: "150px",
            height: "150px",
            marginTop: "8px",
            marginRight: "0px",
            marginBottom: "0px",
            marginLeft: "12px"
        }, 100).attr('src','images/home/animatedMenu/1IMG.jpg').css({'border': '1px solid #FFF'});
// End of common code

    $(this).find("h2").animate({
        left: "600px"
    }, 100).hide();

    $(this).find(".moredetail").delay(150).animate({
        left: "0px"
    }, {
        duration: 150,
        easing: 'easeInBounce'
    });

}, function() {

    $(this).clearQueue().animate({
        width: "246px",
        left: "9px",
        height: "83px",
        backgroundColor: "#222",
        opacity: 0.90
    }, 100).css({'z-index': "1", 'border-top': '1px solid #444'});

    // Start of common code
    $(this).find(".thumb").animate({
        width: "68px",
        height: "68px",
        marginTop: "6px",
        marginRight: "0px",
        marginBottom: "0px",
        marginLeft: "13px"
    }, 100).attr('src','images/home/animatedMenu/1IMGup.jpg').css({'border': '1px solid #000'});
// End of common code

    $(this).find("h2").show().animate({
        left: "0px"
    }, {
        duration: 350,
        easing: 'easeOutBounce'
    });

    $(this).find(".moredetail").animate({
        left: "600px"
    }, 100);

});

Answer 1

为函数中的每个重用代码提供一个因子。你将有两个这样的功能：

function thumbHoverStart(element) {
  $(element).find(".thumb").animate({
        width: "150px",
        height: "150px",
        marginTop: "8px",
        marginRight: "0px",
        marginBottom: "0px",
        marginLeft: "12px"
  }, 100)
  .attr('src','images/home/animatedMenu/1IMG.jpg')
  .css({'border': '1px solid #FFF'});
}

从适当的事件中调用每个函数：

// ...
    opacity: 0.95
}, 100).css({'z-index': "10", 'border-top': 'none'});

thumbHoverStart(this);

$(this).find("h2").animate({
    left: "600px"
// ...

Answer 2

如果图像编号基于id，则只需在设置src时使用

.attr('src','images/home/animatedMenu/' + this.id.replace('test','') + 'IMG.jpg')

然后，您可以根据类选择器$(".hoverable").hover(...

拥有一个代码集

Answer 3

只需初始化下面的函数，该函数将包含公共代码 -

尝试以下代码 -

     $(document).ready(function(){
       $("#test1").hover( function() {

        $(this).animate({
            width: "599px",
            left: "0px",
            height: "168px",
            backgroundColor: "#d7df23",
            opacity: 0.95
        }, 100).css({'z-index': "10", 'border-top': 'none'});

    // call common code function   
           common1(this);


        $(this).find("h2").animate({
            left: "600px"
        }, 100).hide();

        $(this).find(".moredetail").delay(150).animate({
            left: "0px"
        }, {
            duration: 150,
            easing: 'easeInBounce'
        });

    }, function() {

        $(this).clearQueue().animate({
            width: "246px",
            left: "9px",
            height: "83px",
            backgroundColor: "#222",
            opacity: 0.90
        }, 100).css({'z-index': "1", 'border-top': '1px solid #444'});

        // call common function 2.
            common2(this)

        $(this).find("h2").show().animate({
            left: "0px"
        }, {
            duration: 350,
            easing: 'easeOutBounce'
        });

        $(this).find(".moredetail").animate({
            left: "600px"
        }, 100);

    });

});

function common1(obj){
 $(obj).find(".thumb").animate({
                width: "150px",
                height: "150px",
                marginTop: "8px",
                marginRight: "0px",
                marginBottom: "0px",
                marginLeft: "12px"
            }, 100).attr('src','images/home/animatedMenu/1IMG.jpg').css({'border': '1px solid #FFF'});

 }

function common2(obj){
 $(obj).find(".thumb").animate({
            width: "68px",
            height: "68px",
            marginTop: "6px",
            marginRight: "0px",
            marginBottom: "0px",
            marginLeft: "13px"
        }, 100).attr('src','images/home/animatedMenu/1IMGup.jpg').css({'border': '1px solid #000'});

}

Answer 4

如果你不介意加载jQueryUI Core的最小配置，你可以清理大量的代码并将所需的设置转移到css类：

http://jqueryui.com/docs/Effects/Methods

有了它，您可以在网站的css文件中定义所有转换，然后只使用jQueryUI的addClass，removeClass，toggleClass和switchClass方法：< / p>

然后你的jQuery被简化为类似的东西：

$(this).find(".thumb").toggleClass('animatedClass', 100);

其中每个转换的实际视觉样式位于单独的css文件中：

mysite.css

.animatedClass {
width: 150px;
height: 150px;
margin: 8px 0px 0px 12px;
background: url(images/home/animatedMenu/1IMG.jpg);
border: 1px solid #FFF;
}

肯定会让调整效果更容易，因为你不必触摸javascript而你只需调整CSS ...扔进firebug，你甚至可以实时调整效果w / o重新加载。

Answer 5

jQuery有可能通过插件扩展，你可以写一个能够做到：

$("#test1").mySpecialHover();

要编写插件，您需要执行以下操作：

(function($){
    $.fn.mySpecialHover = function() {
    //.. some code
    }
})(jQuery);

哟可以查看来自doctype.tv http://doctype.tv/plugin

的人的好教程

Jquery - 为常见任务编写函数的问题

5 个答案: