拖动的项目和jquery动画
Dragged items and jquery animate
我使用此代码在滚动页面时移动项目
$(document).scroll(function() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
$("#profile").offset({top:scrollTop+34});
});
这个代码显示和隐藏它。
$(document).ready(function() {
$(".various[type=profile]").click(function() {
if($("#profile").attr("clicked") == "yes") {
$("#profile").stop().animate({opacity: 0}, 1000);
setTimeout(function(){$("#profile").css("visibility", "hidden")}, 1000);
$("#profile").attr("clicked", "");
}
else {
$("#profile").css("visibility", "visible");
$("#profile").stop().animate({opacity: 1}, 1000);
$("#profile").attr("clicked", "yes");
}
});
});
这是css
#profile {
position: absolute;
top: 34px;
right: 0;
width: 200px;
visibility: hidden;
z-index: 1000;
opacity: 0;
}
问题是,每次点击项目都会返回到其初始位置(顶部:34px,右侧:0px)。使用fadeIn/fadeOut我也有同样的问题。
我认为您应该看看jQuery UI。他们的代码已经可以使标记成为可拖动和可丢弃的。它们也很容易定义。
$("#profile").draggable();
http://jqueryui.com
这里需要做几件事。
1:您可以使用CSS属性position:fixed
将元素粘贴在垂直的角落,而不是使用jQuery来定位元素。
#profile {
position: fixed;
top: 34px;
right: 0;
width: 200px;
z-index: 1000;
}
2:您的jQuery代码在显示和隐藏方面存在一些问题。首先,clicked
不是有效的HTML属性。您应该考虑使用$(element).data('clicked')
而不是$(element).attr('clicked')
来存储其可见性。接下来,当您设置visibility:hidden
时,click
事件不再在其上注册,因此单击它不会再次显示它。
也许这就是你想要的效果?
相关文章:
- 剑道网格jQuery动画()问题
- jquery动画可以通过编程链接吗
- JQuery动画延长容器不起作用
- 如何正确编程jQuery动画与平滑(导航栏)
- jQuery动画-边框宽度和颜色
- 如何抽象JQuery动画方法
- jQuery动画标题滚动
- JQuery - 为什么 JQuery 动画是同时进行的
- 如何用jquery动画改变背景颜色,就像一个过渡
- 正在等待jQuery动画完成
- 如何优化jquery动画代码
- jQuery动画的持续时间就像一个延迟
- 创建一个类似Jquery动画的Flipboard弹出窗口
- 应用jQuery动画时出现意外的抖动效果
- 如何设置'auto'JQuery动画中的高度
- jQuery动画缩放需要我点击主体
- 如何将jquery动画应用于单个项目
- 如何简化jquery动画函数代码
- 使用 jquery 动画幻灯片使用角度中继器切换
- Jquery动画和when函数