fadein and fadeout jquery - javascript

I have this code:
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
$(function()
{
function animation()
{
$('#img0').attr('src',$('#img1').attr('src')).fadeOut(4000).attr('src',$('#img2').attr('src')).fadeIn(4000).fadeOut(4000).attr('src',$('#img3').attr('src')).fadeIn(4000).fadeOut(4000) ;
animation();
}
});
</script>
<body>
<img id="img0" width="613" height="260" alt="OffLease Only Lot" />
<img src="static/images/home/slides/SLIDERS-mP.jpg" id="img1" width="613" height="260" alt="OffLease Only Lot" hidden="true" />
<img src="static/images/home/slides/slider_usa.jpg" id="img2" width="613" height="260" alt="OffLease Only Lot" hidden="true" />
<img src="static/images/home/slides/SLIDERS-ODOMETER.jpg" id="img3" width="613" height="260" alt="OffLease Only Lot" hidden="true" />
</body>
</html>
i want slide showing the images by changing the source of image and proceed by appearing and disappearing it.
but my code didn't work
why?
how can i fix it?

If you're trying to cycle the three images, do something like this:
function animate1() {
$('#img1').fadeIn(4000, function() {
$('#img1').fadeOut(4000, animate2);
})
}
function animate2() {
// Do the same thing here, and do animate3 too
}
$(function() { $('#img0').fadeOut(4000, animate1) };
I would also take a minute to go over the jQuery fadeOut and fadeIn pages. I don't think they work the way you think they work.
http://api.jquery.com/fadeOut/
http://api.jquery.com/fadeIn/

You have to wait for an animation to finish first like this...
element$.fadeOut(4000, function () {
// Do something when faded out
element$.fadeIn(4000, function () {
// Do something when faded in
});
});

Related

jQuery Smooth Photo Fading

I have this code:
HTML
<div>
<img src="https://cdn3.iconfinder.com/data/icons/basic-2-blue-series/64/a-92-128.png" data-src-alt="https://cdn0.iconfinder.com/data/icons/sitemap-kit/64/sitemap_kit-52-128.png" alt="3" />
<img src="https://cdn2.iconfinder.com/data/icons/design-creativity-round/128/11-128.png" data-src-alt="https://cdn3.iconfinder.com/data/icons/flat-set-1/64/flat_set_1-03-128.png" alt="2" />
<img src="https://cdn1.iconfinder.com/data/icons/camera-and-photography-3/64/Person_Image-128.png" data-src-alt="https://cdn1.iconfinder.com/data/icons/modern-universal/32/icon-09-128.png" alt="3" />
</div>
JS
var overHover = function () { //zibi - efekt overhover
var newSourceImg = $(this).data('src-alt');
$(this).data('src-alt', $(this).attr('src'));
$(this).attr('src', newSourceImg);
}
$(function() {
$('img[data-src-alt]').each(function() {
new Image().src = $(this).data('src-alt');
}).hover(overHover, overHover);
});
How to make smooth photo fade in on hover? Of course, I mean the fadeIn() and fadeOut() methods.
Demo here: http://jsfiddle.net/Xampoo/6d495zkt/2/

Time delay in js function load

There seems to be a time delay before the below mention functions starts to work. I'm not able to identify why it is so. Could anybody guide me on this??
The images do show initially but without the fade in or fade out effect but once all the images are done going the first loop, the animation works.
JS:
$(function fadeAnimation() {
$(".imageClass img:gt(0)").hide();
setInterval(function fadeAnimation() {
$(".imageClass :first-child")
.fadeOut(3000)
.next("img")
.fadeIn(3000)
.end()
.appendTo(".imageClass");
}, 5500);
});
HTML:
<div class="slidesDiv" id="cust">
<img class="imageClass" src="images/Folder1/1.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/2.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/3.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/4.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/5.jpg?" alt="" />
</div>
You have a couple issues in your code.
.imageClass are the <img>... You have to use the container's class, which is .slidesDiv.
You have to use the callback of the animations... Now, both .fadeIn() and .fadeOut are executing at the same moment.
Your timing is wrong... The animations are taking 6 seconds, but you have set the interval to 5,5 seconds.
See comments in code for the details.
$(function fadeAnimation() {
// Hide all image
$(".slidesDiv img").hide();
// Fade the first in right away.
$(".slidesDiv :first-child")
.fadeIn(3000);
// Start the interval to loo through all image
// The interval will execute for the first time in 6 seconds from now.
setInterval(function fadeAnimation() {
// Fade the first out.
$(".slidesDiv :first-child")
.fadeOut(3000, function(){ // This is a "callback" when the fade out is complete
// Fade In the next image
$(this).next("img")
.fadeIn(3000);
// append the faded out image to the end of the container.
$(this).appendTo(".slidesDiv");
});
}, 6000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidesDiv" id="cust">
<img class="imageClass" src="https://via.placeholder.com/200x200?text=1" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=2" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=3" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=4" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=5" alt="" />
</div>

Why the image is not changing when I put mouse over it

Here in the line where the image team.gif is set, I have set events onmouseout and onmouseover, but both are not working. Image is not changing, when I put mouse over it. Please help me.
<div id="about" style="position:absolute;top:1310px;width:1340px;height:655px;background-color:black;opacity:0.9">
<div style="position:absolute;top:140px;left:630px;border:thin solid #03c1cb;width:2px;height:460px " >
</div>
<img src="mission.gif" alt="mission" style="position:absolute;top:1400px;right:430px" />
<img src="vision.gif" alt="vision" style="position:absolute;top:1570px;right:420px" />
<img src="team.gif" alt="team" style="position:absolute;top:1610px;right:360px;z-index:100" onmouseover="lighton(this)" onmouseout="lightof(this)" />
<img src="3.gif" alt="light" id ="light"style="position:absolute;top:1360px;right:15px" />
</div>
my javascript code is here
<script>
lighton(x)
{
x.src="team1.gif";
}
lightof(x)
{
x.src="team.gif";
}
</script>
In your script you need to add the function keyword.
<script>
function lighton(x)
// ^^^^^^^^
{
x.src="team1.gif";
}
function lightof(x)
//^^^^^^^^
{
x.src="team.gif";
}
</script>
<img src="team.gif" alt="team" style="position:absolute;top:1610px;right:360px;z-index:100" onmouseover="this.src='team1.gif'" onmouseout="this.src='team.gif'" />
Fiddle https://jsfiddle.net/8wx8r9za/

div blinking on using jquery .hover()

<script>
$(document).ready(function () {
$("#logo_").hide();
$("#logo_learn").hide();
})
function sl() {
$("#logo_learn").slideToggle(500);
$("#logo_").fadeIn();
}
function hl() {
$("#logo_learn").slideToggle(500);
$("#logo_").fadeOut();
}
</script>
<img id="logo_learn" src="img/logo_learn.png"></img>
<img id="logo" src="img/logo.png" onmouseover="sl()" onmouseout="hl()" ></img>
<img id="logo_" src="img/logo_.png" ></img>
</html>
I have this html such that on hovering on logo.png, logo_ and logo_learn are shown but when i run this on hovering on logo.png, logo_ $ logo_learn blinks.pls post a simple answer.
Use onmouseenter and .stop() like this
HTML
<img id="logo_learn" src="img/logo_learn.png"></img>
<img id="logo" src="img/logo.png" onmouseenter="sl()" onmouseleave="hl()" ></img>
<img id="logo_" src="img/logo_.png" ></img>
jQuery
function sl() {
$("#logo_learn").stop().slideToggle(500);
$("#logo_").stop().fadeIn();
}
function hl() {
$("#logo_learn").stop().slideToggle(500);
$("#logo_").stop().fadeOut();
}
DEMO
Update
What #epascarello said, dont use inline event handlers, use .on() like this code below
$('#logo').on('mouseenter', function () {
$("#logo_learn").stop().slideToggle(500);
$("#logo_").stop().fadeIn();
});
$('#logo').on('mouseleave', function () {
$("#logo_learn").stop().slideToggle(500);
$("#logo_").stop().fadeOut();
});

Set Interval for each image at a different time

I have a simple jquery slideshow. I need to know how to change the interval time individually for each image
I only want the first image to be "9000" and the rest of them to be "3000"
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut(2500).next('img').fadeIn(2500).end().appendTo('.fadein');}, 9000);});
</script>
<div class="fadein" >
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg"></div>
Just set a timeout for 9000, then set the interval for 3000:
$(function(){
function fade() {
$('.fadein :first-child').fadeOut(2500).next('img').fadeIn(2500).end().appendTo('.fadein');
}
setTimeout(function() {
fade();
setInterval(fade, 3000);
}, 9000);
});
This might be what you're looking for. It will at least give you something to play with.
http://jsfiddle.net/BjornJohnson/42b8X/
You set the durations you want as data attributes, which are used by the script to set the delay for a setTimeout.
Like:
<div id="x">
<img class="active" data-timeout="3000" src="https://si0.twimg.com/profile_images/2644394397/748dd7e11df8dbb93f0fcf2abc141526.png" />
<img data-timeout="1500" src="https://si0.twimg.com/profile_images/3379531545/ce1eed2263515e4a173dffc815e1a6fc.jpeg" />
<img data-timeout="5000" src="https://si0.twimg.com/profile_images/3632836331/6e3f4995bd41d49b724e13e694eb1a2d.jpeg" />
<img data-timeout="2000" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQb09ZMKsDuY5lko2JNEfnXb8_8HTfedS9Uuk_7fdcTGoH5Ps-Xxg" />
</div>

Categories

Resources