同时从左右滑动元素？

Posted 2023-05-09

【中文标题】同时从左右滑动元素？

【英文标题】：Slide elements in from left AND right at the same time?

【发布时间】：2012-12-08 20:22:44

【问题描述】：

我试图让两个元素 .show 一次单击即可滑入。我希望第一个元素（img）从左侧滑入，另一个元素（div）在单击按钮（div）时从右侧滑入。然后，当单击另一个按钮时，我希望前两个元素逐渐消失，接下来的两个元素（对应于单击的按钮）滑入。

有谁知道我怎么能做到这一点？我对 JQuery 很陌生。这就是我的 html。

<div id="button1">Button1</div>
<div id="button2">Button2</div>
<div id="button3">Button3</div>

<div id="container">
<img id="slideleft1" src="img.png">
<div id="slideright1">I need this div to slide in from the right.</div>
</div>

    <div id="container">
<img id="slideleft2" src="img.png">
<div id="slideright2">I need this div to slide in from the right.</div>
</div>

    <div id="container">
<img id="slideleft3" src="img.png">
<div id="slideright3">I need this div to slide in from the right.</div>
</div>

【问题讨论】：

请澄清...点击什么？ 和 是否已经存在并被隐藏或者它们会在点击时即时创建？

糟糕！对于那个很抱歉。我澄清了一点。

【参考方案1】：

var $container = $( '#container' );
var $left = $( '#slideleft', $container ); // handle to the image
var $right = $( '#slideright', $container ); // handle to the div

// apply some styles to the container (could also be done with pure css)
$container.css( 
    'position'      : 'relative', // to use absolute positions inside
    'left'          : '0px',
    'top'           : '0px'
 );

// positionate the image outside from the container and hide it
$left.css( 
    'postion'       : 'absolute',
    'left'          : (-$left.width()) + 'px',
    'opacity'       : '0'
 );

// positionate the div outside from the container and hide it
$right.css( 
    'postion'       : 'absolute',
    'right'          : (-$right.width()) + 'px',
    'opacity'       : '0'
 );


// will be executed when the event "slideIn" is triggered to your container element
$( '#container' ).on( 'slideIn', function() 

    var $container = $( this );
    var $left = $( '#slideleft', $container ); // handle to the image
    var $right = $( '#slideright', $container ); // handle to the div

    // slide and fade in the left image
    $left.animate( 
        'left'      : '0px',
        'opacity'   : '1'
     );

    // slide and fade in the right div
    $right.animate( 
        'right'      : '0px',
        'opacity'   : '1'
     );

 );

要触发事件，您可以在 html 中编写类似的内容

<a onclick="$('#container').trigger('slideIn');">click me</a>

【参考方案2】：

如果我是对的，这应该可以解决您的问题：

$('#slideleft').animate(
    marginLeft: '50px'
  , 1000, function() 
    // Animation complete.
);
$('#slideright').animate(
    marginRight: '200px'
  , 1000, function() 
    // Animation complete.
);

​查看演示here。

这不是精确的解决方案，您可以根据需要对其进行修改。

【参考方案3】：

除了 bukfixart 答案之外，您可能还想涵盖有人快速点击应该触发动画的任何内容的情况。

CSS：

#containerposition:relative; background:silver; height:400px;
#slideleft background:red; width:100px; height:100px; position:absolute;
#sliderig

ht 背景：蓝色 ;宽度：100 像素；高度：100px；位置：绝对；右：0​

JS：

var shown = true;
$('body').click(function() 
    if(!$("#slideleft").is(':animated')) 
        if (shown)         
          $('#slideleft').animate(
              left:"-100px"
          , 500, function() 
              shown = !shown;
          );
          $('#slideright').animate(
              right:"-100px"
          , 500, function() 
          );
         else 
          $('#slideleft').animate(
              left:"0px"
          , 500, function() 
              shown = !shown;
          );
          $('#slideright').animate(
              right:"0px"
          , 500, function() 
          );
        
    
);

​

来，拉小提琴：http://jsfiddle.net/Rm4zy/