Question

请看这个小提琴http://jsfiddle.net/rabelais/6bt70uhj/9/

 $('#name-a').click(function() {
 $('#bio-line-1').animate({width: 'toggle'});
 window.setTimeout(function (){$('#bio-line-2').slideToggle( "slow"  );      }, 300);

单击链接时，第一行从左侧滑入，然后在完成后第二行从顶部滑入。当它向后滑动以隐藏时，第一条线在第二条线之前滑开。

如何更改它，以便在第一条线滑开之前第二条线滑开？

Answer 1

我认为这就是你想要的：

$('#name-a').click(function () {
    window.setTimeout(function () {
        $('#bio-line-2').slideToggle("slow", function () {

            $('#bio-line-1').animate({
                width: 'toggle'
            });
        });
    }, 300);
});

演示：https://jsfiddle.net/tusharj/6bt70uhj/11/

Answer 2

我认为你可以做到

var $l2 = $('#bio-line-2'),
  $l1 = $('#bio-line-1');
var $a = $('#name-a').click(function() {
  $a.toggleClass('visible');
  var visible = $a.hasClass('visible'),
    $f = visible ? $l1 : $l2,
    $s = visible ? $l2 : $l1;

  $f.animate({
    width: 'toggle'
  });
  window.setTimeout(function() {
    $s.slideToggle("slow");
  }, 300);
});

#name-a {
  left: 38px;
  position: fixed;
  top: 38px;
  z-index: 1;
}
#bio-line-1 {
  left: 150px;
  position: fixed;
  top: 35px;
  width: 633px;
  z-index: 1;
}
#bio-line-1 p {
  color: #333333;
  display: block;
  float: right;
  font-size: 16px;
  line-height: 21px;
  width: 552px;
}
#bio-line-2 {
  left: 150px;
  margin-top: 20px;
  position: fixed;
  top: 38px;
  width: 633px;
  z-index: 1;
}
#bio-line-2 p {
  color: #333333;
  display: block;
  float: right;
  font-size: 16px;
  line-height: 21px;
  width: 552px;
}
.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="name-a">
  <a href="#">John Love</a>
</div>
<div id="bio-line-1" class="hidden">
  <p>holds a Master's Degree from the University of the Arts</p>
</div>
<div id="bio-line-2" class="hidden">
  <p>London and currently works in London.</p>
</div>

Answer 3

$('#name-a').click(function() {
    if($("#bio-line-2").is(":visible")){
        window.setTimeout(function (){
            $('#bio-line-1').animate({width: 'toggle'});
        }, 300);
        $('#bio-line-2').slideToggle( "slow" ); 
    }
    else{
        window.setTimeout(function (){
            $('#bio-line-2').slideToggle( "slow" ); 
        }, 300);
        $('#bio-line-1').animate({width: 'toggle'});
    }
});

Answer 4

$('#name-a').click(function () {
    if ($('#bio-line-1').css('display') == 'none') {
        $('#bio-line-1').animate({ width: 'toggle' });
        window.setTimeout(function () {
            $('#bio-line-2').slideToggle("slow");
        }, 300);
    }
    else {
        $('#bio-line-2').slideToggle("slow");

        window.setTimeout(function () {
            $('#bio-line-1').animate({ width: 'toggle' });
        }, 300);
    }
});

<强> DEMO

Answer 5

我做这样的事情。我也不会使用setTimeout因为它不是触发连续动画的可靠方法。计时器可以在不同的时间触发，具体取决于UI线程中发生的事情，从而破坏您尝试创建的效果。您应该使用每个动画的animate success callback，以便在恰当的时间触发下一个动画。

http://jsfiddle.net/6bt70uhj/23/

var $line1 = $('#bio-line-1'),
    $line2 = $('#bio-line-2');

$('#name-a').click(function() {
    if (!$line1.is(":visible")) {
        $line1.animate({
            width: 'toggle'
        }, 300, function () {
            $line2.slideToggle("slow");
        });
    } else {
        $line2.slideToggle("slow", function() {
            $line1.animate({
                width: 'toggle'
            });
        });
    }
});

Answer 6

i have made some condition that while showing the lines, line number 1   will appear first and then line number 2 will appear. and while hiding lines, line number 2 will hide first and then line number 1 will hide... i think this is what you trying

Here是小提琴链接

谢谢

切换div在特定时间滑动

6 个答案: