Question

我有一些文字，我想在一种情况下上下滑动，但在不同情况下淡入淡出。

目前我正在这样做：

var text1 = $('.text1'),
    text2 = $('.text2');

if (conditionIsTrue){
    if (text1.is(':hidden')) {
        text2.slideUp();
        text1.slideDown();

    } else if (text2.is(':hidden')) {
        text1.slideUp();
        text2.slideDown();
    }
} else {
    if (text1.is(':hidden')) {
        text2.fadeOut();
        text1.fadeIn();

    } else if (text2.is(':hidden')) {
        text1.fadeOut();
        text2.fadeIn();
    }
}

虽然有重复的代码重复。有没有办法在没有代码重复的情况下完成它？

Answer 1

我找到了一个很好的解决方案：）

    var fadeSlideMethod = conditionIsTrue ? 'slide' : 'fade',
        text1 = $('.text1'),
        text2 = $('.text2');;

    //lets you dynamically pick if you want to use jQueries slide or fade animation
    $.fn.fadeOrSlide = function(method, inOrOut) {
        var _this = this;
        var functionality = {
            slide : {
                'in' : function(){
                     _this.slideDown();
                },
                'out' : function(){
                    _this.slideUp();
                }
            },
            fade : {
                'in' : function(){
                     _this.fadeIn();
                },
                'out' : function(){
                    _this.fadeOut();
                }
            }
        };
        functionality[method][inOrOut]();
    }

    if (text1.is(':hidden')) {
        text2.fadeOrSlide(fadeSlideMethod,'out');
        text1.fadeOrSlide(fadeSlideMethod,'in');

    } else if (text2.is(':hidden')) {
        text1.fadeOrSlide(fadeSlideMethod,'out');
        text2.fadeOrSlide(fadeSlideMethod,'in');
    }

有条件地切换出jQuery方法吗？

1 个答案: