jquery问题求教（实现一个div层的动态效果）

Yoking_Ma 2012-11-15 05:14:16

css：

.cases ｛width:300px;height:240px;position:absolute;z-index:99;bottom:55px;right:20px;｝

.cases .c_ico {width:76px;height:76px;position:absolute;z-index:999;top:-30px;left:-40px;}

html:



<div class="cases">

   <div class="c_ico"></div>

   <ul>

      <li></li>

   </ul>  

</div>

jquery:



$(".c_ico").click(function() {

    $(".cases").stop().animate({

	    right:"-300px"		  

	},500)	

});

初学jquery第一天，我想实现点击"c_ico"层实现"cases"层移动到浏览器区域外隐藏，（"c_ico"层未完全隐藏）然后再次单击"c_ico"层让"cases"层移动出来回复原状，上面的jquery部分代码是实现的隐藏，请问如何实现再让单击后出来？尝试好多方法都未解决，求教！谢谢！

...全文

183 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

wbb123yu 2012-11-16

打赏
举报

引用 4 楼 jacky4504 的回复:

引用 3 楼 wbb123yu 的回复:XML/HTML code?12345678910111213141516171819202122232425<head><meta charset="utf-8"><title>无标题文档</title><style>*{ margin:0; padding:0 }body { width:100%; overflow:hidde……

不客气我也是新手也没怎么用过刚照着文档写出来的

Yoking_Ma 2012-11-16

打赏
举报

引用 3 楼 wbb123yu 的回复:

XML/HTML code?12345678910111213141516171819202122232425<head><meta charset="utf-8"><title>无标题文档</title><style>*{ margin:0; padding:0 }body { width:100%; overflow:hidden; }.cases{width:300……

非常感谢，还是toggle最简单了。不过记录下，学习到了两种实现方法： 1:


$(function(){
    $(".c_ico").toggle(
        function(){$(".cases").stop().animate({right:"-300px"},500)},
        function(){$(".cases").stop().animate({right:"20px"},500)}
    )
})


var isRight = false;
var mgRight = 600;
$(".c_ico").click(function() {    
    $(".cases").stop().animate({
        right:(isRight-0.5)*mgRight+'px'
    },500);	
	isRight = !isRight;
	if(!isRight) {
	mgRight = 600
	}else{
	mgRight = 40
	}
});

wbb123yu 2012-11-16

打赏
举报

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0 }
body { width:100%; overflow:hidden; }
.cases{width:300px;height:240px;position:absolute;z-index:99;bottom:55px;right:20px; background:#CCC}
.cases .c_ico {width:76px;height:76px;position:absolute;z-index:999;top:-30px;left:-40px;background:#999}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(function(){
	$(".c_ico").toggle(
		function(){$(".cases").stop().animate({right:"-300px"},500)},
		function(){$(".cases").stop().animate({right:"20px"},500)}
	)
})
</script>
</head>

<body>
<div class="cases">
   <div class="c_ico">11111</div>
</div>
</body>

切换什么的toggle就好了

new_bird_0001 2012-11-16

打赏
举报

var isRight = false ; $(".c_ico").click(function() { $(".cases").stop().animate({ right:(isRight-0.5)*600+'px' },500) ; isRight = !isRight; });

ILOVE_ASPNET 2012-11-15

打赏
举报

你上面都做了-300的操作，你只需要在做第一次点击和第二次点击用个状态来标识就可以了，每点一次改变下一次的值，比如


var bl=false;
$(".c_ico").click(function() {
   if(!false) {
    $(".cases").stop().animate({
        right:"-300px"        
    },500) 
bl=true;
}
else {
  $(".cases").stop().animate({
        right:"300px"        
    },500) 
bl=false;
}

});

Jquery实现无缝隙上下左右滚动，超简便代码值得一看的代码

jquery中delegate问题请问大家一个我在delegate使用过程中遇到的问题：用delegate动态绑定，用改成这样：$(function() {$("#desktop").delegate(".AppContent", "resize", function() {var _this = $(this);var win = _this.parents(".AppWindow");win....

为了实现办公自动化，我做了一个导入学生表到数据库的小东西，运行虽然没问题，但是效率极低，百度遍网络没有发现解决方案，特来求教。想要实现的功能是：1，边导入边显示，这个已经实现，但是效果不理想，我想要显示处理结果的时候滚动条始终在最下方这样就能显示最新处理的数据了，下面的代码中我使用了锚点定位，觉得很笨~~~对于这个需求有更好的方法吗？2，导入时大约前1500条导入非常快，显示的效果也很赞，滚动条狂...

使用webmagic采集博客类的网站示例

CSS code . 打开MyEclipse 6.0.1，然后“window”→“Preferences” 2. 选择“java”，展开，“Editor”，选择“Content Assist”。 3. 选择“Content Assist”，然后看到右边，右边的“Auto-Activation”下面的“Auto Activation triggers for java”