使 jquery 代码更短答案

【问题标题】：Make jquery code shorter使 jquery 代码更短
【发布时间】：2012-11-28 20:00:11
【问题描述】：

我知道我的代码可以像现在这样更短。但我只是不知道如何缩短它。我想这样做是因为它让一切变得更清晰。此外，这段代码使一切都变慢了。

html

   <div id="slider">
    <div id="slideLeft">
        <div class="slideText">
            <h1>Ik zoek werk</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Suspendisse iaculis magna sed lacus vestibulum venenatis. 
                Quisque sem turpis, semper vitae gravida sit amet, tristique ut ligula. 
            </p>
            <div class="slideButton">Bekijken</div>
        </div>
        <img src="../_/img/slidetest.png" />
    </div>
    <div id="slideRight">
        <div class="slideText">
            <h1>Ik zoek personeel</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Suspendisse iaculis magna sed lacus vestibulum venenatis.
                Quisque sem turpis, semper vitae gravida sit amet, tristique ut ligula. 
            </p>
            <div class="slideButton">Bekijken</div>         
        </div>
        <img class="slideImgSolid" src="../_/img/slidetest3.png" />
    </div>
</div>

css

#slider{width:100%;min-height:450px;background-color:#999;}
#slideLeft{width:50%;position:absolute;left:0;background-color:#333;height:450px;overflow:hidden;}
#slideRight{width:50%;position:absolute;right:0;height:450px;background-color:#666;overflow:hidden;}

.slideText{position:absolute;top:50%;overflow:hidden;width:400px;z-index:100;}
#slideLeft .slideText{right:0;}
#slideRight .slideText{left:-150px;}

#slider h1{position:relative;font-size:18px;background-color:white;padding:5px 15px 5px 15px;}
#slideRight .slideText h1{text-align:right;left:0px;}
#slideLeft .slideText h1{text-align:left;right:-150px;}
#slider p{position:relative;width:300px;right:-400px;margin:20px 0 0 0;}
.slideButton{position:relative;right:0;right:-400px;margin:10px 0 0 0;background-color:#888;width:70px;padding:5px;text-align:center;}
.slideImgSolid{position:absolute;top:0;right:0;}

$('#slideLeft').mouseenter(function(){
    $("#slideRight").animate({
       width: '30.1%',
       easing: 'easInOutCubic'                 
    }, { duration: 200, queue: false });
    $("#slideLeft p").animate({
       right: '0px',
       easing: 'easInOutCubic'
    }, { duration: 100, queue: false });
    $("#slideLeft h1").animate({
       right: '0px',
       easing: 'easInOutCubic'
    }, { duration: 200, queue: false });
    $("#slideLeft .slideButton").animate({
       right: '0px',
       easing: 'easInOutCubic'
    }, { duration: 200, queue: false });
    $("#slideLeft").animate({
       width: '70%',
       easing: 'easInOutCubic',
    }, { duration: 200, queue: false });
    });

$('#slideLeft').mouseleave(function(){
    $("#slideRight").animate({
       width: '50%',
       easing: 'easInOutCubic'
    }, { duration: 200, queue: false });
    $("#slideLeft h1").animate({
       right: '-150px',
       easing: 'easInOutCubic'
    }, { duration: 200, queue: false });
    $("#slideLeft p").animate({
       right: '-400px',
       easing: 'easInOutCubic'
    }, { duration: 200, queue: false });
    $("#slideLeft .slideButton").animate({
       right: '-400px',
       easing: 'easInOutCubic'
    }, { duration: 100, queue: false });
    $("#slideLeft").animate({
       width: '50%',
       easing: 'easInOutCubic'
    }, { duration: 200, queue: false });
});

【问题讨论】：

你知道你可以在选择器中放逗号吗？
不，我没有。这会有所帮助
我不一定同意这段代码可以更短。正如dystroy 所建议的那样，您可以将#slideLeft h1 和#slideLeft .slideButton 放入一个函数调用中，但除此之外，您的动画对象需要不同的单独值，所以我看不出您可以做些什么来使代码更小或更快。不过我可能错了。
@Grüse 你是对的，这不会使代码更短。这只是一个评论，而不是一个答案。我在下面提出一个答案。
@dystroy 我知道，我只是在参考您的有用评论。我不是要攻击你所说的话，如果听起来那样，对不起。为您的回答 +1，我喜欢它。

标签： jquery jquery-animate slide mouseleave

【解决方案1】：

我看到的最干净的解决方案是定义对象：

var objects = [
  {selector: "#slideLeft p", enterright: '0px', leaveright: '-400px', duration: 200},
   ...
];

然后使用

   $('#slideLeft').mouseenter(function(){
       $.each(objects, function(){
           $(this.selector).animate({
               right: this.enterright,
               easing: 'easInOutCubic'
           }, { duration: this.duration, queue: false });
       });
   }).mouseleave(function(){
       $.each(objects, function(){
           $(this.selector).animate({
               right: this.leaveright,
               easing: 'easInOutCubic'
           }, { duration: this.duration, queue: false });
       });
   });

这将很容易扩展和管理，因为所有重要参数都在 objects 数组声明中。

如果您确定您的对象不会改变，您可能希望将对象声明中的选择器替换为生成的 jQuery 对象以获得更高效的代码：

var objects = [
  {$obj: $("#slideLeft p"), enterright: '0px', leaveright: '-400px', duration: 200},
  ...

【讨论】：