Javascript 拖动的项目和jquery动画

Javascript 拖动的项目和jquery动画,javascript,jquery,Javascript,Jquery,我使用此代码在滚动页面时移动项目 $(document).scroll(function() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; $("#profile").offset({top:scrollTop+34}); }); 这段代码用来显示和隐藏它 $(document).ready(function() { $(".various[type=profile

我使用此代码在滚动页面时移动项目

$(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();

在这里,您需要做几件事

1:您可以使用CSS属性
position:fixed
将元素粘贴在竖直的角落,而不是使用jQuery定位元素

#profile {
    position: fixed;
    top: 34px;
    right: 0;
    width: 200px;
    z-index: 1000;
}
2:jQuery代码在显示和隐藏方面存在一些问题。首先,单击的
不是有效的HTML属性。您应该考虑使用<代码> $(元素).DATA(“单击”)< /COD>而不是<代码> $(元素).Atf'(“单击”)< /Cord>以存储其可见性。接下来,当您设置
可见性:隐藏
时,
单击
事件不再在其上注册,因此单击它将不会再次显示它


也许是您想要的效果?

我想说,尝试使用
$('elem').css()将
$('elem').addClass('class')
切换到
$('elem')。添加一个css类以提高课程的可视性。我不确定,但是css功能“可能”会覆盖为拖放创建的样式。你能做一把小提琴让我们测试吗?不,那没有帮助。正如我所知,Dragable用于用鼠标拖动项目。然后你想用滚动条拖动项目吗?页面正在滚动,项目也在滚动。不是“选中”,而是“单击”。也许在编写好的代码时使用$(elem).data()是正确的,但是“$(elem).attr('clicked')也可以正常工作。关于能见度。。。它再次显示,但我应该使用animate回调函数设置可见性:hidden。“位置:fixed”没有帮助。我不知道为什么我开始说“checked”,哈哈。有点太习惯于回答关于单选按钮的问题了。至于可见性,当它被设置为
隐藏
时,当我单击元素所占用的空间时,它不会再次显示。我只在Windows上的Chrome上测试过。可能是有这个bug。现在我有了这个if($(“#profile”).attr(“clicked”)==“yes”){$(“#profile”).stop().animate({opacity:0},1000,function(){$(“#profile”).css(“visibility”,“hidden”);$(“#profile”).attr(“clicked”,“clicked”),它工作得很好:)‘好’这不是一般问题。