how to remove the handler for inside P element
by Lien Z
HTML
<div id="container">
<div id="container1" class="con">
<p class="random1">first</p>
<p class="random2">first</p>
<p class="random3">first</p>
<p class="random4">first</p>
<p class="random5">first</p>
<p class="random6">first</p>
<p class="random7">first</p>
<p class="random8">first</p>
<p class="random9">first</p>
<p class="random10">first</p>
<p class="random11">first</p>
<p class="random12">first</p>
<p class="random13">first</p>
<p class="random14">first</p>
<p class="random15">first</p>
<p class="random16">first</p>
</div>
<div id="container2" class="con">
<p class="random1">second</p>
<p class="random2">second</p>
<p class="random3">second</p>
<p class="random4">second</p>
<p class="random5">second</p>
<p class="random6">second</p>
<p class="random7">second</p>
<p class="random8">second</p>
<p class="random9">second</p>
<p class="random10">second</p>
<p class="random11">second</p>
<p class="random12">second</p>
<p class="random13">second</p>
<p class="random14">second</p>
<p class="random15">second</p>
<p class="random16">second</p>
</div>
<div id="container3" class="con">
<p class="random1">third</p>
<p class="random2">third</p>
<p class="random3">third</p>
<p class="random4">third</p>
<p class="random5">third</p>
<p class="random6">third</p>
<p...CSS
#container{margin:0 auto;position:relative;width:728px;height:190px;border:1px solid black;}
#container1,#container3,#container3{margin:0 auto;width:800px;height:600px;position:absolute;top:0;left:0; }
#container1 p{ float:left;display:block }
#container1{width:728px;height:190px;}
#container2{width:728px;height:190px;}
#container3{width:728px;height:190px;}
.con:hover{cursor:pointer}
.con p{position:absolute;}
.random1{left:0;top:10px;color:#444;}
.random2{left:40px;top:20px;color:#aaa;}
.random3{left:80px;top:100px;color:#999;}
.random4{left:120px;top:30px;color:#ff0000;}
.random5{left:160px;top:60px;color:#00ff00;}
.random6{left:200px;top:70px;color:#0000ff;}
.random7{left:240px;top:90px;color:#00f0f0;}
.random8{left:280px;top:24px;color:yellow;}
.random9{left:320px;top:560px;color:pink;}
.random10{left:360px;top:780px;color:green;}
.random11{left:400px;top:105px;color:#ff0000;}
.random12{left:440px;top:31px;color:#00ff00;}
.random13{left:480px;top:32px;color:#0000ff;}
.random14{left:520px;top:43px;color:gray;}
.random15{left:560px;top:40px;color:blue;}
.random16{left:600px;top:50px;color:#bbb;}
.random216{left:0;top:10px;color:#444;}
.random215{left:40px;top:20px;color:#aaa;}
.random214{left:80px;top:100px;color:#999;}
.random213{left:120px;top:30px;color:#ff0000;}
.random212{left:160px;top:60px;color:#00ff00;}
.random211{left:200px;top:70px;color:#0000ff;}
.random210{left:240px;top:90px;color:#00f0f0;}
.random29{left:280px;top:24px;color:yellow;}
...JavaScript
(function(){
$("#container2,#container3").hide();
}())
function autoRun(){
var con = $("#container"),
childLen = con.children().length,
index = 0;
function run(index){
if(index != 2){
con.children().eq(index).children("p").animate({"fontSize":0},200,function(){con.children().eq(index).hide();});
for(var i=0;i<con.children().eq(index+1).children().length ;i++){
var randomSize = Math.floor(Math.random() * 20) + 10;
con.children().eq(index+1).children("p").eq(i).addClass("random"+(i+1)).animate({"fontSize":randomSize},400,function(){$(this).animate({"opacity":1},400)});
}
con.children().eq(index+1).show().animate({"opacity":1},1000);
}else if(index == 2){
con.children().eq(2).children("p").animate({"fontSize":0},200,function(){con.children().eq(2).hide();});
for(var i=0;i<con.children().eq(0).children().length ;i++){
var randomSize = Math.floor(Math.random() * 20) + 10;
con.children().eq(0).children("p").eq(i).addClass("random"+(i+1)).animate({"fontSize":randomSize},400,function(){$(this).animate({"opacity":1},400)});
}
con.children().eq(0).show().animate({"opacity":1},1000);
}
console.log(index);
}
$(".con").on("click",showNext).children("p").on('click',function(e){e.stopPropagation();})
function...