jquery从左向右滑动使div在幻灯片上跳起来 [英] Jquery slide left to right makes div jump up on slide

问题描述

我试图创建一个效果，当点击一个链接时，它会使最初的div滑动到左侧，并显示第二个div滑动到左侧，当从第二个div单击链接时，div滑动到右侧第一个div也可以向右滑动。

这是我的代码到目前为止

HTML

 < div id =box1> 
< a href =＃id =click1>点击以显示其他div< / a> 
< br> 
不可累积，不得累积。不要使用任何可能导致死亡的事件。 
< / div> 
 
< div id =box2style =display：none> 
< a href =＃id =click2>点击以显示其他div< / a> 
< br> 
不可累积，不得累积。不要使用任何可能导致死亡的事件。 
< / div> 
  

JS

  $（'＃click1'）。click（function（）{
 $（'＃box1'）。hide（slide ，{
 direction：left
}，1000）; 
 $（'＃box2'）。show（slide，{
 direction：right
 
 $ b $）
 $（'＃click2'）。click（function（）{
 $（'＃box2'）。hide（slide， {
 direction：right
}，1000）; 
 $（'＃box1'）。show（slide，{
 direction：left
}，1000）; 
}）; 
}）; 
  

以下是JSFiddle Link与我目前使用的 http://jsfiddle.net/rayshinn/abNmN/4/

问题是，当我点击链接并调用幻灯片动画时，第二个隐藏的div跳转到位。有没有一种方法可以从左至右创建一个平滑的动画，而不会出现div弹出/跳跃效果？

感谢您的帮助。

解决方案

在相对定位的包装中使用绝对定位。 Fiddle exemple （更新）

HTML

 < div id =wrapper> 
< div class =slidingDivid =box1> ...< / div> 
< div class =slidingDivid =box2style =display：none> ...< / div> 
< / div> 
  

CSS

  #wrapper {
 position：relative; 
} 
 
 #wrapper div {
 position：absolute; 
 top：0; 
} 
  

Javascript自动计算高度

  var maxHeight = 0; 
 $（'。slidingDiv'）。each（function（）{
 if（$（this）.height（）> maxHeight）maxHeight = $（this）.height（）; 
}）; 
 $（'＃wrapper'）。height（maxHeight）; 
  

I'm trying to create an effect where when a link is clicked it makes the initial div slide to left and reveal the second div sliding to the left and when a link is clicked from the second div the div slides to the right with the first div sliding right as well.

Here is my code so far

HTML

<div id="box1">
    <a href="#" id="click1">Click to show other div</a>
     <br>
    Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh    ultricies sem amet.Class aptent taciti sociosqu ad posuere.
</div>

<div id="box2" style="display:none">
    <a href="#" id="click2">Click to show other div</a>
     <br>
    Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh    ultricies sem amet.Class aptent taciti sociosqu ad posuere.
</div>

JS

$(document).ready(function () {
    $('#click1').click(function () {
        $('#box1').hide("slide", {
            direction: "left"
        }, 1000);
        $('#box2').show("slide", {
            direction: "right"
        }, 1000);
    });
    $('#click2').click(function () {
        $('#box2').hide("slide", {
            direction: "right"
        }, 1000);
        $('#box1').show("slide", {
            direction: "left"
        }, 1000);
    });
});

Here is the JSFiddle Link with what I have so far http://jsfiddle.net/rayshinn/abNmN/4/

The issue is that when I click the link and invoke the slide animation the second hidden div jumps into place. Is there a way I can create a smooth animation from left to right without the div poping/jumping effect?

Thank you for your help.

解决方案

Use absolute positioning inside a relative-positioned wrapper.

Fiddle exemple (updated)

HTML

<div id="wrapper">
    <div class="slidingDiv" id="box1">...</div>
    <div class="slidingDiv" id="box2" style="display:none">...</div>
</div>

CSS

#wrapper {
    position:relative;
}

#wrapper div {
    position:absolute;
    top:0;
}

Javascript auto-height calculation

var maxHeight = 0;
$('.slidingDiv').each(function() {
    if($(this).height() > maxHeight) maxHeight = $(this).height();
});
$('#wrapper').height(maxHeight);

这篇关于jquery从左向右滑动使div在幻灯片上跳起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！