Jquery slide to left
Hi
i want to create an effect whee,rby i have content and when a button is clicked or hovered over the hidden content on the right is revealed because it slides to the left
So, in theory like a fruit machine wheel but horizontal instead of vertical.
Can this be done with jquery?
Thanks
i want to create an effect whee,rby i have content and when a button is clicked or hovered over the hidden content on the right is revealed because it slides to the left
So, in theory like a fruit machine wheel but horizontal instead of vertical.
Can this be done with jquery?
Thanks
a simple example, hover would be .hover()
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
html,body {
position:absolute;
}
#a {
display:block;
position: absolute;
left: 0;
top: 0;
height:100px;
width:100px;
background-color:blue;
z-index: 10;
}
#b {
display:block;
position: absolute;
left: 0;
top: 0;
height:100px;
width:100px;
background-color:red;
}
input{
position: absolute;
left: 0;
top:130px;
}
</style>
<script type="text/javascript" src="preload.js"></script>
<script type='text/javascript'>
$(function(){
$("input[type='button']").click(function() {
$('#a').animate({left: parseInt($('#a').css('left'),10) == 0 ? -$('#a').outerWidth():0
});
});
});
</script>
</head>
<body>
<div id="a"></div>
<div id="b">Hi</div>
<input type="button" value="click here"/>
</body>
</html>
bit of code for hover/mouse over
$("#a,#b").mouseover(function() {
$('#a').animate({left: parseInt($('#a').css('left'),10) == 0 ? -$('#a').outerWidth():0
});
})ASKER
can this example be expanded to have unlimited slides rather than 2?
Cheers
Cheers
Had a play and come up with this:
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
html,body {
}
.area{
position:relative;
height:100px;
margin-top: 50px;
width:100px;
}
.a {
display:block;
position: absolute;
height:100px;
width:100px;
background-color:blue;
z-index: 10;
left:0;
}
.b {
display:block;
position: absolute;
height:105px;
width:100px;
background-color:red;
}
input{
position: absolute;
left: 0;
top:130px;
}
</style>
<script type="text/javascript" src="preload.js"></script>
<script type='text/javascript'>
$(function(){
$(".area").each(function(){
$(this).mouseenter(function() {
var tomove = $(this).children(".a");
var outer = tomove.outerWidth();
var leftside= tomove.css('left');
tomove.stop().animate({left: parseInt(leftside,10) == 0 ? -outer:0
});
});
});
});
</script>
</head>
<body>
<div class ="area">
<div class="a">Whats the first day of the week</div>
<div class="b">Monday</div>
</div>
<div class ="area">
<div class="a">How many 2's in 20</div>
<div class="b">10</div>
</div>
<div class ="area">
<div class="a"></div>
<div class="b">Hi</div>
</div>
<!-- <input type="button" value="click here"/>-->
</body>
</html>ASKER
Hi Thanks although i meant the number of slides rather than instances of a slide
So at the moment you have a blue slide then a red slide on hover. If i wanted a third slide shown when hovering on the red slide how can that be achieved?
So at the moment you have a blue slide then a red slide on hover. If i wanted a third slide shown when hovering on the red slide how can that be achieved?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Check this link
http://www.1stwebdesigner.com/css/36-eye-catching-jquery-navigation-menus/
where will have multiple sliding
But I think the opt one is
http://www.ndoherty.biz/demos/coda-slider/1.1.1/#4