Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Transition of a div on click event using Jquery with demo

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 161
    Comment on it

    Hello friends,

    If you want to make an animation like transition on your multiple views or If you want to slide your view i.e. your DIV element from one to another, you can use the following code.

    In this we have all the content in inside UL and on click of left and right arrows, we can move the DIV  left and right.

    Please find the code below:

    HTML:

    <div class="outerSlider">    
    		<div class="slider12">
    			<span class="leftArrow" onclick="changeIndex(-1)"></span>
    	        <span class="rightArrow" onclick="changeIndex(1)"></span>
    			<ul>
    				<li class="one">
    					<input type="text" />
    					<input type="text" />
    					<input type="text" />
    				</li>
    				<li class="two">
    					<input type="text" />
    					<input type="text" />
    					<input type="text" />
    				</li>
    				<li class="three">
    					<input type="text" />
    					<input type="text" />
    					<input type="text" />
    				</li>
    				<li class="four">
    					<input type="text" />
    					<input type="text" />
    					<input type="text" />
    				</li>
    				<li class="five">
    					<input type="text" />
    					<input type="text" />
    					<input type="text" />
    				</li>
    			</ul>
    		</div>
    	</div>

    CSS:

    .slider12{overflow: hidden;}
    .slider12 ul{ max-width: 2000px;width: 2000px; left:-10px; margin:0px; overflow: hidden; position:relative;padding-left: 0;}
    .slider12 ul li{ background: #999;list-style-image: none !important; list-style:none; float:left; width:345px; margin-left: 10px; cursor: pointer; padding:5px; color:#fff;}
    .outerSlider{ width:355px; position:relative; margin: 0 auto}
    .toolTip{display:none}
    .leftArrow{ position: absolute; top:58px; left:-30px; width:15px; height:22px; background:url(leftArrow.png); z-index: 99; cursor: pointer}
    .rightArrow{ position: absolute; top:58px; right:-20px; width:15px; height:22px; background:url(rightArrow.png); z-index: 99; cursor: pointer}

    Jquery:

        var globalIndex = 0;
    	function  changeIndex(pos) {
    		globalIndex = globalIndex + pos;
    		console.log(globalIndex);
    		if (globalIndex > 0 && globalIndex <= 4) {
    			console.log("globalIndex : "+globalIndex);
    			var left = globalIndex * 365;
    			console.log(left);
    			$(".slider12 ul").animate({
    				"left": "-"+left
    			});
    		} else if(globalIndex <= 0 && globalIndex >= -4) {
    			console.log("globalIndex : "+globalIndex);
    			var left = globalIndex * 365;
    			console.log(left);
    			$(".slider12 ul").animate({
    				"left": "+"+left
    			});
    		}
    	}

    With the help of the following code you can make you view animate and display the other view.

    You can also find the attached demo.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: