Animations: jQuery vs CSS? - javascript

I've been building a custom jQuery "carousel" (slider) which continuously iterates over three images. So far that's working well, however I've had trouble trying to write code that changes the 'src' attribute of '#slideshow' while simultaneously triggering fadeIn or fadeOut.
My question: Am I tackling this properly (using jQuery) or should I resort to toggling a css animation instead?
Code:
$(function() {
var slides = ['img/slide1.jpg', 'img/slide2.jpg', 'img/slide3.jpg'];
function changeSlide(arr) {
$('#slideshow').attr('src', arr[0]);
var i = 1;
setInterval(function() {
$('#slideshow').attr('src', arr[i]);
i++;
if (i >= arr.length) {
i = 0;
}
}, 3500);
}
changeSlide(slides);
});
For clarification my HTML for the carousel looks like such:
<div id="carousel">
<img id="slideshow" src="img/slide1.jpg">
</div>

Try loading all images initially to avoid requesting images continuously , substitute setting class to slideshow for id , utilize complete callback function of .fadeIn() , .fadeOut() on first image in parent element , next image in callback
$(function() {
function changeSlide(el) {
$(el)
.fadeIn(1500, function() {
$(this).fadeOut(1500, function() {
changeSlide(this.nextElementSibling || this.parentElement.firstElementChild)
})
})
}
changeSlide($(".slideshow:first"));
});
.slideshow {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="carousel">
<img class="slideshow" src="http://lorempixel.com/50/50/nature" />
<img class="slideshow" src="http://lorempixel.com/50/50/sports" />
<img class="slideshow" src="http://lorempixel.com/50/50/cats" />
</div>

jQuery in my opinion is far better option than using CSS. You are going good. Every code has some or the other bug which can be fixed later. You just have to be observant. That's all!

I've had trouble trying to write code that changes the 'src' attribute of '#slideshow' while simultaneously triggering fadeIn or fadeOut.
If that's a way you want to do it, here's the way it could be done:
1) Preload all pictures to avoid src-change-triggered load.
2) Add position:relative to your #carousel, then add an additional img inside your slider.
3) Change position to absolute for both imgs
4) Hide one 'img'
Alternate between images, so :
1 - you change the src of hidden one to "next" image
2 - you simultaneously fade out visible and fade in invisible one
3 - repeat

Related

Possible to use jQuery fadeIn and fadeOut and leave a child element visible

My strong guess is that the answer to this question is no.
I have an element with a background image and I am trying to switch between several different background images with fadeIn and fadeOut - the only problem is that I want one of my child elements to stay visible.
Here's the snippet :
$(function(){
var i =0;
var images = ["http://example.com/images/image2.jpg","http://example.com/images/image3.jpg"];
var image = $('header');
image.css('background-image', 'url(http://example.com/images/image1.jpg)');
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images[i] +')');
image.fadeIn(1000);
});
if(i == (images.length - 1)){
i = 0;
} else {
i++;
}
}, 5000);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="header-content">
<div class="header-content-inner">
<h1>Text I Want To Keep</h1>
Learn How
</div>
</div>
</header>
Nothing too crazy. My only problem is that on fadeIn and fadeOut, everything goes completely to white, whereas I would like to retain my h1 element above. The structure of the site works a lot better without moving that element out of the header, so if it's possible that would be much easier for me.
This won't work. fadeIn and fadeOut are using the opacity-property in css, which is changing the opacity for elements and all of their children.
As said before, position:absolute may be the right solution for you

Fade in a class before fading out completely

I would like to change an image in my site with fading effect. The thing is that I am using two different classes for the same div, so actually I want to fade out one class and in the meanwhile start fading in the second class, before the first one has been completely removed.
HTML:
<div id="background_image" class="day"></div>
CSS:
.day{
background: url(day.png);
}
.night {
background: url(night.png);
}
JQuery:
setTimeout(function(){
if($("#background_image").hasClass("day")){
$("#background_image").fadeOut(function() {
$(this).removeClass("day");
});
$("#Landscape").fadeIn(function() {
$(this).addClass("night");
});
}else{
$("#background_image").fadeOut(function() {
$(this).removeClass("night");
});
$("#Landscape").fadeIn(function() {
$(this).addClass("day");
});
}
}, 5000);
But this code makes the image "day.png" first to disappear completely and then the "night.png" comes which is not what I want.
Is there a way to fade out the class "day" and start fade it "night" without having a blank space between the fading? Thanks in advance
It seems that what you're trying to do is cross-fading. This is normally done using 2 divs. If this is for the entire background, then I suggest http://srobbin.com/jquery-plugins/backstretch/. You can take a look at their implementation to narrow it down to just a div if you don't need it to cover the entire background.
This is how I solved it for a similar case.
var images = [
"/content/images/crane1.jpg",
"/content/images/crane2.jpg",
"/content/images/crane-interior.jpg"
];
// The index variable will keep track of which image is currently showing
var index = 0;
// Call backstretch for the first time,
// In this case, I'm settings speed of 500ms for a fadeIn effect between images.
$.backstretch(images[index], { speed: 500 });
// Set an interval that increments the index and sets the new image
// Note: The fadeIn speed set above will be inherited
setInterval(function () {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
EDIT:
For non-full background, take a look at this post Crossfade Background images using jQuery
Also take a look at this, might be closer to your scenario Cross fade background-image with jQuery

Show bigger image on thumbnail's hover

For a list of images I have the urls for the squared thumbnail http://example.com/img1_thumb.jpg and for the original size (any proportion) http://example.com/img1.jpg. I'm showing the thumbnails in a grid and I'd like to show the original one when the user puts the mouse over a image in the grid. Maybe using a floating element, the target is the user can see the image in more detail and view the parts of the cropped in the thumbnail.
How can I do it? I'm a beginner with HTML/css/Javascript
There are lots of jQuery plugins that do this. Since you are a beginner I would recommend starting there. Here is an article with some different options. Here is an example of what you are looking for.
U can work without thumbnails..
for thumbnail
<img src="http://example.com/img1.jpg" class="compress"/>
on hover of the above show this one
$(".compress").hover(function(){
$(".image").show();
});
full image
<img src="http://example.com/img1.jpg" class="image"/>
css
.compress{
width:20%;
/*aspect ratio will be maintained*/
}
.image{
display:none;
position:absolute;
}
its not complete,but i think it might help
Use JQuery:
$(function() {
$('#thumbnails img').click(function() {
$('#thumbnails').hide();
var src = $(this).attr('src').replace('.png', 'Large.png');
$('#largeImage').attr('src', src).show();
});
$('#largeImage').hide().click(function() {
$(this).hide();
$('#thumbnails').show();
});
});
<div id="thumbnails">
<img src="thumbnail1.png">...
</div>
<img id="largeImage" src="">
Basically you can create a <div class="some_class"><img src="http://example.com/img1.jpg"></div> set it's display:none and then bind an event to the thumb div like this :
$(".thumb_class").hover(function(){
$(".some_class").show()
},
function(){
$(".some_class").hide()
}
Of course you can personalize every div . The second function let you to hide the div when the mouse is out of the thumb. Hope i was as clear as possible.

Giving fadeIn fadeOut effect on changing the image src

I was working with responsive web design and I wanted to slide some images in a page. I tried some plugins but the problem with plugin is it uses width and height property and some also assign position absolute. So I thought of changing the src of image myself using js and it worked fine, but can I give some transition effect to it?
What I have done is:
var i =0;
var total =2;
window.setInterval(function(){
show_hide();
}, 1000);
function show_hide()
{
var img=$('.image-holder img, .image-holder2 img');
//alert(img.length);
if(i%2==0)
{
img[0].src='http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
img[1].src='http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
i=0;
}
else
{
img[0].src='http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
img[1].src='http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
}
i++;
}
my html
<div class="image-holder" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
<div class="image-holder2" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
Answering the title, giving a fadeIn/fadeOut while changing the src is easy, just let the element fadeOut, change the src and let it fade in again.
Also, I would like to point out that with jQuery, iterating through a class like that, ruins the purpose of using it's own selector ".each()"
$('.image-holder img, .image-holder2 img').each(function() {
$(this).fadeOut(200,function() {
$(this).attr('src', 'http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png');
$(this).fadeIn(200);
});
});
http://jsfiddle.net/tq9nV/1/
Use jQuery with animate(). You can also run show(N ms) on one of the images and hide(N ms) on the other. You can also choose how to show/hide the images using effects (like fadein and fadeout).
Also, have a look at http://api.jquery.com/fadeIn/ and http://api.jquery.com/fadeOut/

Nivo slider transition

I have the nivo slider added into my Magento theme on the homepage, at the moment it is showing a load of random effects.
I just want it to show one effect where all the slides will slide in from the right, appear on the screen for 3 seconds and then slide out to the left with the new one sliding in from the right in a continuous manner.
I'm not very good with javascript so I am hoping someone can help me out on this the nivo javascript is here in pastebin
You should us slideInRight effect, there's nothing to change with the nivo's .js file. Just use this
$('#slider').nivoSlider({effect:'slideInRight'});
Hope this helps.
its work for me. let it try add data-transition effect name slideInRight or slideInLeft
<div id="slider" class="nivoSlider" width="480" >
<img src="slider/1.jpg" alt="" data-transition="slideInLeft" />
<img src="slider/4.jpg" alt="" data-transition="slideInRight" />
</div>
also can try in JS
$(window).load(function() {
$('#slider').nivoSlider({effect:'slideInRight'});
});
As per this answer :
You can choose from the following effects:
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse
You can edit the jquery.nivo.slider.js file, if you open this file in notepad and go to line-348, you should see the following code:-
// Generate random effect
if(settings.effect === 'random'){
anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade',
'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');
currentEffect = anims[Math.floor(Math.random()*(anims.length + 1))];
if(currentEffect === undefined) { currentEffect = 'fade'; }
}
In the code change the following line, (make sure to remove all the other effects stated in this line)
anims = new Array ('slideInRight');
and also the last line
if(currentEffect === undefined) {currentEffect = 'slideInRight'}
Now you should have a single transition effect.
in webpart.cs file
img.addAtribute("data-transition","slideInRight");

Categories

Resources