jquery - 使 jquery 代码更短

Question

我知道我的代码可以比现在更短。但我只是不知道如何缩短它。我想这样做，因为它让一切变得更加清晰。而且这段代码使一切变得比它需要的更慢。

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;}

js

$('#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 });
});

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