jQuery从右到左滑动内部div

Posted 2023-02-25

【中文标题】jQuery从右到左滑动内部div

【英文标题】：jQuery Slide Inner div from right to left

【发布时间】：2013-07-22 03:47:50

【问题描述】：

这是我目前得到的：

JSFiddle

CSS：

#button-top  width: 100px; position: absolute; left: 75%; top: 40px; padding-left: 100px;overflow: hidden;
#button-top:hover, #button-bottom:hover cursor: pointer;
.slide  position: relative; height: 100px; overflow: hidden; width: 350px; 
.slide img position: relative; z-index: 100;
.slide p width: 80px; padding:8px 16px; color: #fff; margin: 0; 
.innerTop, .innerBottom  position: absolute; left: 0; top: 10px; width: 200px; height: 90px; padding: 6px; background: url(http://i39.tinypic.com/nz4ldw.png) 0 0 no-repeat; z-index: 50; display: none; 

#button-bottom  width: 100px; position: absolute; left: 75%; top: 240px; padding-left: 100px;overflow: hidden;

脚本：

$('#button-top').click(function() 
  $('.innerTop').toggle('slide');
);
$('#button-bottom').click(function() 
  $('.innerBottom').toggle('slide');      
);

HTML：

<div class="hide-mobile" id="button-top">
[IMG]
<div class="slide innerTop"><p>HIDDEN SLIDING CONTENT</p></div>
</div>

<div class="hide-mobile" id="button-bottom">
[IMG]
<div class="slide innerBottom"><p>HIDDEN SLIDING CONTENT</p></div>
</div>

我希望蓝色的内部 div 从右滑到左。

【问题讨论】：

你可以试试这个教程以获得更好的结果themeswild.com/read/slide-navigation-left-to-right

【参考方案1】：

使用动画功能可以轻松完成。这是解决方案：

$('#button-top').toggle(function() 
  $('.innerTop').animate('left':'3px');
, function() 
 $('.innerTop').animate('left':'103px');
);


$('#button-bottom').toggle(function() 
  $('.innerBottom').animate('left':'3px');
, function() 
 $('.innerBottom').animate('left':'103px');
);

http://jsfiddle.net/nAaMV/6/

【讨论】：

哈里斯，谢谢你，但是蓝色的 div 在按钮的右侧变得可见。那是我原来的问题的一部分。有没有办法只在蓝色 div 到达按钮左侧时才显示它？

这几乎是完美的。我在想 - 是否可以将动画与淡化结合起来？这样当它回到右边时，蓝色标签就会淡出。

此页面上的滑动效果可以满足我的需要：veselov.sumy.ua/uploads/files/demo/020/test.htm 但我不知道如何使其适应我的 2 个按钮实例

当我被允许点击向上箭头时，我会回来给你积分。我决定使用完全滑出视图的拉片，但您的解决方案也非常有用。谢谢！

【参考方案2】：

你可以这样做：

// Set the options for the effect type chosen
var options =  direction: 'right' ;

// Set the duration (default: 400 milliseconds)
var duration = 700;

$('#button-top').click(function() 
      $('.innerTop').toggle('slide', options, duration);
);
$('#button-bottom').click(function() 
      $('.innerBottom').toggle('slide', options, duration);      
);

请确保在您的代码中包含

jQuery UI

文件，就像我在小提琴中包含的一样（请查看右侧选中的 jQuery UI 1.9.2 复选框） .

FIDDLE DEMO #1 或 FIDDLE DEMO #2