0

希望您可以在这里为两个部分提供帮助。

一个是帮助我意识到如何在 jQuery 的最佳实践方面更有效地缩短/提高我的代码的效率。

另一个是扩展我的代码 - 我单击以滑出 div（使用动画/左），但我在页面上有很多迭代。我所追求的是，​​如果一个 div 被点击并滑出，另一个被点击，打开的 div 滑回来，新的 div 滑出。等等。希望这是有道理的。

jQuery

$('.each-brew.ale').toggle(function() {       
  $('.each-brew-content.ale').animate({ left: '0' }, 1000);
  $('.each-brew-content.ale').css('display','block');
}, function() {       
  $('.each-brew-content.ale').animate({ left: '-100%' }, 1000);
  $('.each-brew-content.ale').css('display','none');
});
$('.each-brew.bramling').toggle(function() {       
  $('.each-brew-content.bramling').animate({ left: '0' }, 1000);
  $('.each-brew-content.bramling').css('display','block');
}, function() {       
  $('.each-brew-content.bramling').animate({ left: '-100%' }, 1000);
  $('.each-brew-content.bramling').css('display','none');
});
$('.each-brew.bullet').toggle(function() {       
  $('.each-brew-content.bullet').animate({ left: '0' }, 1000);
  $('.each-brew-content.bullet').css('display','block');
}, function() {       
  $('.each-brew-content.bullet').animate({ left: '-100%' }, 1000);
  $('.each-brew-content.bullet').css('display','none');
});
$('.each-brew.miami-weisse').toggle(function() {       
  $('.each-brew-content.miami-weisse').animate({ left: '0' }, 1000);
  $('.each-brew-content.miami-weisse').css('display','block');
}, function() {       
  $('.each-brew-content.miami-weisse').animate({ left: '-100%' }, 1000);
  $('.each-brew-content.miami-weisse').css('display','none');
});

HTML

<div class="row">
    <div class="four columns first-margin-offset">
        <div class="each-brew-container delay-1">
                                        <div class="each-brew ale">
                <span class="each-brew-title">Ale<span class="each-brew-description">South Pacific Best Bitter</span></span>
                </div>
                <div class="each-brew-separator"></div>
                                        <div class="each-brew bramling">
                <span class="each-brew-title">Bramling<span class="each-brew-description">English Hop Golden Ale</span></span>
                </div>
                <div class="each-brew-separator"></div>
                                        <div class="each-brew bullet">
                <span class="each-brew-title">Bullet<span class="each-brew-description">Original IPA</span></span>
                </div>
                <div class="each-brew-separator"></div>
                                        <div class="each-brew miami-weisse">
                <span class="each-brew-title">Miami Weisse<span class="each-brew-description">American Hopped Wheat Beer</span></span>
                </div>
                <div class="each-brew-separator"></div>
                    </div>
    </div>
            <div class="each-brew-content ale">
        <div class="three columns first-margin-offset">

                        <div class="each-brew-image"><img width="327" height="511" src="ale-clip-01.png" class="attachment-brew-standard" alt="ale-clip-01" /></div>        </div>
        <div class="three columns first-margin-offset">
            <div class="default-content-area content-area ale-content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            </div>
        </div>
    </div>
            <div class="each-brew-content bramling">
        <div class="three columns first-margin-offset">

                        <div class="each-brew-image"><img width="326" height="511" src="bramling.png" class="attachment-brew-standard" alt="bramling" /></div>      </div>
        <div class="three columns first-margin-offset">
            <div class="default-content-area content-area bramling-content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            </div>
        </div>
    </div>
            <div class="each-brew-content bullet">
        <div class="three columns first-margin-offset">

                        <div class="each-brew-image"><img width="327" height="511" src="bullet.png" class="attachment-brew-standard" alt="bullet" /></div>      </div>
        <div class="three columns first-margin-offset">
            <div class="default-content-area content-area bullet-content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            </div>
        </div>
    </div>
            <div class="each-brew-content miami-weisse">
        <div class="three columns first-margin-offset">

                        <div class="each-brew-image"><img width="326" height="511" src="miami-weisse.png" class="attachment-brew-standard" alt="miami-weisse" /></div>      </div>
        <div class="three columns first-margin-offset">
            <div class="default-content-area content-area miami-weisse-content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
        </div>
    </div>
    </div>
4

2 回答 2

1

1）只需循环它：

   var animateClasses = ['ale', 'brambling', 'bullet', 'miami-weisse'];
   for (var i=0; i<animateClasses.length; i++) {
      (function(animCls) { 
      $('.each-brew.'+animCls).toggle(function() {       
         $('.each-brew-content.'+animCls).show().animate({ left: '0' }, 1000);
      }, function() {       
           $('.each-brew-content.'+animCls)
                  .animate({ left: '-100%' }, 1000, function() { $(this).hide()});  // hide the element in the animation on-complete callback  
      });
      })(animateClasses[i]);  //  self calling anonymous function
   }

2）保持一个全局变量保存最后一次点击的div。在覆盖它之前，如果它不为空，则对其进行返回动画。例如：

var lastClicked = null;
var animateClasses = ['ale', 'brambling', 'bullet', 'miami-weisse'];
   for (var i=0; i<animateClasses.length; i++) {
      (function(animCls) { 
      $('.each-brew.'+animCls).toggle(function() {
    if (lastClicked && lastClicked != this) {
        // animate it back
        $(lastClicked).trigger('click');
    }
    lastClicked = this;
    // continue with handler as before
于 2013-02-05T15:06:03.957 回答
0

这就是我最终得到的结果——结合使用@Iftah 的代码：

var lastClicked = null;
var animateClasses = ['ale', 'bramling', 'bullet', 'miami-weisse'];
   for (var i=0; i<animateClasses.length; i++) {
      (function(animCls) { 
      $('.each-brew.'+animCls).toggle(function() {
    if (lastClicked && lastClicked != this) {
        // animate it back
        $(lastClicked).trigger('click');
    }
    lastClicked = this;
    $('.each-brew-content.'+animCls).show().animate({ left: '0' }, 1000).css('position','inherit');
      }, function() {       
           $('.each-brew-content.'+animCls)
                  .animate({ left: '-33.3333%' }, 1000, function() { $(this).hide()})  // hide the element in the animation on-complete callback
                  .css('position','relative'); 
      });
      })(animateClasses[i]);  //  self calling anonymous function
   }

只是需要延迟新项目的到来......

于 2013-02-08T13:46:40.913 回答