1

私は自分のコードが今のものよりも短くなる可能性があることを知っています。ただ、短くする方法がわかりません。すべてが明確になるので、これを行いたいと思います。また、このコードはすべてを必要以上に遅くします。

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

1 に答える 1

4

私が見る最もクリーンな解決策は、オブジェクトを定義することです：

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},
  ...
于 2012-12-11T09:46:54.453 に答える