滑出div，如果div打开而其他单击，滑出并滑入新的div

时间：2013-02-05 14:56:24

标签： javascript jquery css

希望你能在这里提供两个部分的帮助。

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

另一个是扩展我的代码 - 我点击滑出div（使用animate / left）但我在页面上有很多次迭代。我所追求的是如果一个div被点击并滑出，另一个被点击，open 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>

2 个答案:

答案 0 :(得分：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。在覆盖之前，如果它不为null，则返回动画。例如：

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

答案 1 :(得分：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
   }

只需要推迟新项目......

相关问题
最新问题