改变一个div的类与一个单独的元素

所以，我试图创建一个网站，如果你点击一个链接，面板从侧面w滑出。更多信息使用jQuery和css改变一个div的类与一个单独的元素

该面板是一个div，其位置是绝对的，并且移动到屏幕的外部。点击链接时，我希望面板移动到位。从本质上讲，我想改变那个div的类，使绝对定位将div移动到屏幕上...

所以，我知道如何装配一个div或更改它自己的类，但我不知道如何连接到一个单独的div，以便它控制div。我也不知道添加什么功能，以便它滑入到位而不是只出现...

我很新的jQuery ...所以如果任何人都可以帮助它，将不胜感激。

2012-09-29 user1709061

最简单的方法是动画化它的位置或边距/填充。

你钩到充当触发对象：

$("#trigger").click(function(){ 
});

并且点击时，重新定位的元素使用.animate()

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#trigger").click(function(){ 
     // Adjust the effect (2000 miliseconds) 
     $("#moreinfo").animate({ opacity: 1.0, left: 0 }, 2000); 
    }); 
}); 
</script>

然后在CSS的地方，我们最初隐藏远离屏幕的元素。

#moreinfo { 
position: absolute; 
top: 5px; 
left: -2000px; // You can adjust based upon the actual dimensions of the object 
}

来源

2012-09-29 23:41:47

那么，那些首先到位的文本将被放置在标题？ – user1709061

Javascript应该放在你的$（document）.ready（function（）{...}）函数中。无论它在标题还是正文中都没关系。 – Barmar

所以，这没有奏效。我确定这是我的错，我只是不知道我在做什么错...这是一个链接：http://dualdigitaldesign.com/client/highcue/ – user1709061

你需要使用jQuery的动画功能，或者你可以简单地用这样的连接上要控制滑动面板的DIV的onclick=事件做定期的javascript：

function slide(slider, data, step, callback) { 
    slider.style.left = data+"px"; 
    data += step; 
    if(dataIn <= data && data <= dataOut) { 
    setTimeout(function() { slide(slider,data,step,callback) }, 15); 
    } else if(callback && (typeof(callback) == 'function')) { 
    callback();} 
}

而这样一来，你可以简单地设置您要点击滑动DIV事件：

function click() { 
    var data = 0; 
    var step = 15; 
    var slider = document.GetElementById("sliderDiv"); 
    slide(slider,data,step); 
}

而在未来，你现在可以使用一个回调（），如果你需要异步运行某些东西。 :)

来源

2012-09-29 23:42:32 L0j1k

改变一个div的类与一个单独的元素

回答

相关问题