How can I toggle two images by fading using jQuery .fadeToggle method.
You must put the 2 elements you want to crossfade one on top of the other by using position:absolute;. You begin by hiding one. To make a crossfade, you just run simultaneously a fadeToggle() on each of the 2 elements.
The HTML:
<div id="d1" style="background-color:red;"></div>
<div id="d2" style="background-color:blue;"></div>
<span>Click</span>
The CSS:
#d1, #d2 {position:absolute;
top:12px;
left:12px;
width:120px;
height:120px;}
span {position:absolute;
top:200px;
left:12px;
cursor:pointer;}
The Javascript:
$(document).ready(function(){
$("#d1").show();
$("#d2").hide();
$("span").click(function(){ // For demo's sake we attach the crossFade to a click event.
$("#d1").fadeToggle(500);
$("#d2").fadeToggle(500);
});
});
Is this what you're trying to do? http://jsfiddle.net/U5GSy/
Here's the code in the fiddle
$(function(){
$("input:button").click(function(){
$(".cat").fadeToggle("fast");
});
});
<img id="cat1" class="cat" src="http://www.crystalinks.com/catop.jpg" alt="" />
<img id="cat2" class="cat" src="http://blindgossip.com/wp-content/uploads/2010/11/cat-claw-1.jpg" alt="" />
<br />
<input type="button" value="Go Kitty Go" />
#cat1 {
position:absolute;
top:0;
left:0;
}
#cat2 {
display:none;
position:absolute;
top:0;
left:0;
}
input {
position:absolute;
top: 220px;
}
Use fadeToggle twice. This will toggle between 3 images. just set imgno to change it. And also remember that this should be greater than the sources in src array.
<script src="jquery.js"></script>
<body>
<div id="hold"><img src="img1" />Hold</div>
<script>
var src= ['src1', 'src2', 'src3'];
var count=0;
var imgno=3;
$("#hold").click(
function (){
$(this).fadeToggle("fast",
function (){
$(this).find('img').attr('src', src[++count%imgno]);
$(this).fadeToggle("fast", function (){ return true; });
}
)
}
)
</script>
Related
I want to change the background image of one div when the mouse is over a different div, using jQuery.
jQuery(function() {
jQuery('.linktomouseover').mouseover(function() {
$(.linktomouseover2).css('background-image', "url('test.jpg')");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
So when mouse is over div with class linktomouseover it will actually change the background of div with class linktomouseover2
this does not seem to work. please help?
You're missing quotes in the code jQuery(.linktomouseover)
This is the correct code
jQuery(function() {
jQuery(".linktomouseover").mouseover(function() {
jQuery(".linktomouseover2").css('background-image', "url('test.jpg')");
});
});
DEMO
this is a mistake on your code.
jQuery:
jQuery('.linktomouseover2').mouseover(function() {
$('.linktomouseover').css('background-image', "url('http://cdn.androidpolice.com/wp-content/uploads/2012/11/nexusae0_wallpaper_01.jpg')");
});
HTML:
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
CSS:
.linktomouseover{
position:relative;
display:block;
width:100%;
background:#e7e7e7;
height:200px;
}
.linktomouseover2{
position:relative;
display:block;
width:100%;
background:#d7d7d7;
height:200px;
}
Live Demo On JSFiddle
I have these 5 div's and I want them to fill the parent div on mouse hover I have these codes but they do not push the previous div (the div above) anywhere.
this is the HTML code:
<div id="photo">
<div id="no1">
</div>
<div id="no2">
</div>
<div id="no3">
</div>
<div id="no4">
</div>
<div id="no5">
</div>
and this is the CSS:
div#photo{
margin:10px 0;
padding:5px;
width:980px;
height:300px;
background-color:rgba(100,100,100,0.5);
border-radius:20px;
overflow:hidden;}
div#no1{
background-color:#FF00FF;}
div#no2{
background-color:#FF0;}
div#no3{
background-color:#00F;}
div#no4{
background-color:#0F0;}
div#no5{
background-color:#F00;}
div#no1, div#no2, div#no3, div#no4, div#no5{
width:970px;
height:61px;
transition:all 2s;}
div#no1:hover, div#no2:hover, div#no3:hover, div#no4:hover, div#no5:hover{
height:305px;}
Try this
I have used simple logic, Just applied height:0 to other div except the hovered div.
This is how to implement Eugen's solution.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
div#photo {
margin:10px 0;
padding:5px;
width:980px;
height:300px;
background-color:rgba(100, 100, 100, 0.5);
border-radius:20px;
overflow:hidden;
}
div#no1 {background-color:#FF00FF;}
div#no2 {background-color:#FF0;}
div#no3 {background-color:#00F;}
div#no4 {background-color:#0F0;}
div#no5 {background-color:#F00;}
div#no1, div#no2, div#no3, div#no4, div#no5 {
width:970px;
height:61px;
transition:all 2s;
}
.exp {height:305px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".exp").mouseenter(function () {
$(".exp").not(this).stop();
$(this).prevAll().animate({
height: "0px"
}, 2000, function () {
// Animation complete.
});
$(this).animate({
height: "305px"
}, 2000, function () {
// Animation complete.
});
});
$(".exp").mouseleave(function () {
$(".exp").not(this).stop();
$(".exp").animate({
height: "61px"
}, 200, function () {
// Animation complete.
});
});
}); //END $(document).ready()
</script>
</head>
<body>
<div id="photo">
<div id="no1" class="exp"> </div>
<div id="no2" class="exp"> </div>
<div id="no3" class="exp"> </div>
<div id="no4" class="exp"> </div>
<div id="no5" class="exp"> </div>
</div>
</body>
</html>
you can use jquery .mouseenter & .mouseleave events to do your job.
here i made an example
Give every #noX id the same class, doesn't matter which name. For instance: .hoverPic.
$( document ).ready(function() {
$('.hoverPic').each(function(){ /*pick each element */
$(this).hover(function(){ /* do something on hover */
$(this).css({ /*set css value */
'width': '100%',
'height': '100%'
});
});
});
});
you need to move the :hover selector to the parent and apply the styles to that states children. I'm not completely clear on your goal but this is how you would style it. Good luck and let me know if you need further help :)
div#photo:hover > div{
height:305px;
}
DEMO
http://jsfiddle.net/59Uph/
EDIT
Try something along the lines of this
http://jsfiddle.net/59Uph/2/
I have a swipe gesture working the way I would like, when the user swipes from right/left the images toggle. Now I just want to add a different link to each img src, so slider1 has a different link associated to it then slider2, etc. Can someone please help me figure this out?
<pre>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='swipe.js'></script>
<title>Presentation</title>
<style>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
#mySwipe div b {
display:block;
margin:0px;
margin-top:240px;
background:url("");
height:1280px;
width:720px;
}
</style>
<script type="text/javascript">
// When the DOM is ready, initialize the scripts.
jQuery(function( $ ){
// Get a reference to the container.
var container = $( ".container" );
// Bind the link to toggle the slide.
$( "a" ).click(
function( event ){
// Prevent the default event.
event.preventDefault();
// Toggle the slide based on its current
// visibility.
if (container.is( ":visible" )){
// Hide - slide up.
container.slideUp(500, function(){ $('').show(); });
} else {
// Show - slide down.
container.slideDown(300, function(){ $('').hide(); });
}
}
);
});
</script>
</head>
<body>
<img src="../question_header/question.png" />
<div class="nfooter"></div>
<div id='mySwipe' style='width:720px; height:981px; margin-top:55px;' class='swipe'>
<div class='swipe-wrap'>
<div><img src="../slider/slider1.png" /></div>
<div><img src="../slider/slider2.png" /></div>
<div><img src="../slider/slider3.png" /></div>
<div><img src="../slider/slider4.png" /></div>
</div>
</div>
<script>
// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
// transitionEnd: function(index, element) {}
});
// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
</script>
<div class='container'>
<div class='inner'>
</div>
</div>
</body>
</html>
</pre>
THIRD ANSWER:Change image DEMO HERE
jQuery(document).ready(function($) {
$('img[slideurl]').click(function(){
if($(this).is(':last-child')){
$(this).insertBefore($('img[slideUrl]').first());
}
else {
$(this).next('img[slideUrl]').insertBefore($(this));
}
});
});
SECOND ANSWER:
After i read your comments ,i suggest using jQuery,to add a click event to every img that has a custo attribute , for example slideUrl='http://stackoverflow.com' :
HTML:
<div class='swipe-wrap'>
<div><img src="../slider/slider1.png" slideUrl='http://link1.com' /></div>
<div><img src="../slider/slider2.png" slideUrl='http://link2.com'/></div>
<div><img src="../slider/slider3.png" slideUrl='http://link3.com'/></div>
<div><img src="../slider/slider4.png" slideUrl='http://link4.com'/></div>
</div>
JS code:
$('img[slideUrl]').click(function(){
window.location.href = $(this).attr('slideUrl');
});
CSS:
img[slideUrl]{
cursor:pointer;
}
FIRST ANSWER:
You can do it using <a> element with href attribute like this :
<div><a href='link1'><img src="../slider/slider1.png" /></a></div>
Try like this:-
<div>
<a href='link1' style="display: block; height: 100%">
<img src="../slider/slider1.png" alt=".." />
</a> </div>
This will make the entire <div> clickable.
So I have browsed all over, including these posts:
Jquery change image on click
JQuery - how can I change an image src on click of a link
http://www.kirupa.com/forum/showthread.php?301972-Swap-image-on-click-Anyone
and other links as well and I guess I don't understand how it works and can't get it to work.
Here is what I have so far:
HTML:
<div style="width:475px; height:230px; background-color:#c1bfbf;">
<div style="width:450px; height:220px; position:relative; overflow:hidden; float:left;">
<ul style="width:450px; height:220px; list-style:none; padding:0px; border:0px; margin:0px; position:relative; float:left;">
<li id="first" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph2.png" /></li>
<li id="second" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph1.png" /></li>
</ul>
</div>
<div style="width:25px; height:110px; position:relative; float:left;">
<img src="images/2nd.png" />
</div>
<div style="width:25px; height:110px; position:relative; float:left;">
<img src="images/1st.png" />
</div>
</div>
This code works using anchor tags, but the problem is it pulls the page down to the anchor which I don't want. So I moved on to jQuery and image swaps. I've implementing other peoples codes to see if they work and I can't get them to work. I've used this jQuery code:
$(function () {
$('.menulink').click(function () {
$("#bg").attr('src', "images/imagegraph1.png");
return false;
});
});
Matched up with this HTML:
switch me
<img src="images/imagegraph2.png" id="bg" />
And all that happens is the showing of imagegraph2.png and not the switching of imagegraph1.png. Usually when you do and then hit the "=" sign, a list of possible links comes up for your image. When its in Javascript, it doesn't do that, you just put what folder/name of file. So I'm sure I'll get some negative votes here, but I have exhausted all avenue's to get this to work.
Try e.preventDefault();
$(function () {
$('.menulink').click(function (e) {
e.preventDefault();
$("#bg").attr('src', "images/imagegraph1.png");
});
});
i want to make a simple jquery slider, i dont know jquery very well, so i decided to ask u guys, here is some inf about slider:
javascript:
setInterval(function() {
$('#scroll').animate({top: -200}, 500);
},1000);
html:
<div id="slider">
<div id="scroll">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
</div>
and css:
#slider { height:200px; width:200px; background:#dfdfdf; overflow:hidden; position:relative; }
#scroll { position:absolute; }
.content { height:200px; width:200px; color:#000; }
the only thing it does, just animate from 1st to 2nd div, but i need to animate it endlessly, and not only from 1 to a 2 but also to 3rd one. then from 3 to a 1st and etc.. pls smb help!
Try these (carousels)
http://www.1stwebdesigner.com/freebies/jquery-carousel-plugins-tutorials/
http://bxslider.com/