css - 使用 Jquery 和 CSS 方向属性动画滚动条

标签 css jquery-animate overflow

我有一个带有水平滚动条的 div。我正在尝试在屏幕加载时为滚动条设置动画以一直向右滚动并再次向后滚动;目的是向用户显示滚动时可用的内容。

在我的 CSS 中将方向设置为 ltr,滚动一直设置到左侧。当它设置为 rtl 时,它一直设置到右边。这表明实现以下 jquery 动画代码将实现我的目标。这种方法有什么问题,为什么代码什么都不做?

$( document ).ready(function() {
$( "#divWithScroll" ).animate({ "direction": "rtl" }, "slow" );
$( "#divWithScroll" ).animate({ "direction": "ltr" }, "slow" );

});

CSS:

#divWithScroll{
position:absolute;
top:4em;
left:5%;
right:0px;
right:5%;
height:14em;
overflow-x:scroll;
overflow-y:hidden;
white-space: nowrap;
width: 90%;
direction:ltr;
}

最佳答案

也许您应该提供代码或 fiddle 。

根据我的推测,我猜您应该将 div 内容的左侧位置一直设置为向左动画,然后再次将其一直设置为向右链接动画。

示例:

$(content)
  .animate({"left": $(this).parent().width() - $(this).width()},"slow")
  .animate({"left": 0},"slow");

关于css - 使用 Jquery 和 CSS 方向属性动画滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22971053/

相关文章:

带 Angular 的 HTML 矩形框

css - 如何用另一个固定的 div 推送固定的 div

html - 水平对齐我的两个社交媒体 div

javascript - 在鼠标悬停时取消 Jquery Slider 事件

css - 内容背景被截断

html - CSS 如何在固定居中 Logo 的任一侧创建响应线

jquery - 停止.animate()

jQuery UI Resizable with overflow-y

android - 当 hashmap > 512 时 JNI 溢出

javascript - 使用 Jquery 动画让一个按钮将一个框移动到下一个 Angular 落