How to toggle multiple images in jquery? - javascript

HTML
<div class="image_rollover">
<img id="image_one" src=image_one.png">
<img id="image_two" src="image_two.png">
<img id="image_three" src="image_three.png">
<img id="image_four" src="image_four.png">
<img id="image_five" src="image_five.png">
<img id="image_six" src="image_six.png">
</div>
CSS
.image_rollover{
border:1px solid #000000;
width:130px;
height:80px;
overflow:hidden;
}
Script
$(document).ready(function(){
$("#image_two, #image_three, #image_four, #image_five, #image_six").hide();
$(".image_rollover").hover(function(){
$(this).find("#image_one, #image_two, #image_three, #image_four, #image_five, #image_six").toggle();
});
});
When I hover mouse over the div, first image changes to second image and then nothing happens. When I hover mouse over the div, I want to change the image one by one from "image_one" to "image_six".
Does any one know how to do this???

http://jsfiddle.net/p7dsm1h7/
$(document).ready(function () {
$("#image_two, #image_three, #image_four, #image_five, #image_six").hide();
$(".image_rollover").hover(function () {
animation()
});
});
function animation() {
var $curr=$(".image_rollover img:visible");
var $next=$curr.next();
if($next.size()==0) $next=$(".image_rollover img:first");
$next.show();
$curr.hide();
}
or maybe something like this
UPDATE
http://jsfiddle.net/9v8ykfjs/2/
var hover=false;
var interval;
$(document).ready(function () {
$("#image_two, #image_three, #image_four, #image_five, #image_six").hide();
$(".image_rollover").hover(function () {
hover=true;
animation()
},function(){
hover=false;
clearTimeout(interval);
$(".image_rollover img:visible").hide();
$(".image_rollover img:first").show();
});
});
function animation() {
if(hover==false) return;
var $curr=$(".image_rollover img:visible");
var $next=$curr.next();
if($next.size()==0) $next=$(".image_rollover img:first");
$next.show();
$curr.hide();
interval=setTimeout(function(){ animation(); }, 1000);
}

$(document).ready(function(){
$('.image_rollover img').hide();
var index = 0;
var $imageRollover = $('.image_rollover');
var maxIndex = $imageRollover.find('img').length;
$imageRollover.on('mouseenter', function(){
$('.image_rollover img').hide();
console.log(index);
$imageRollover.find('img').eq(index).show();
index++;
if (index >= maxIndex) {
index = 0;
}
});
});
You can also see http://jsfiddle.net/2q2ycbdz/2/

Note that will be better if you hide your images by css and if you simplify the selector to get all images inside the div (or group those images with a class).
Check out this:
JS
$(document).ready(function(){
$(".image_rollover").hover(function(){
$(this).find("img").toggle();
});
});
CSS
.image_rollover{
border:1px solid #000000;
width:130px;
height:80px;
overflow: hidden;
}
.image_rollover img{
display: none;
}
HTML
<div class="image_rollover">
<img id="image_one" src=image_one.png">
<img id="image_two" src="image_two.png">
<img id="image_three" src="image_three.png">
<img id="image_four" src="image_four.png">
<img id="image_five" src="image_five.png">
<img id="image_six" src="image_six.png">
</div>
Check out this codepen.

JS
jQuery(document).ready(function(){
var current_image = 1;
jQuery('.image_rollover').hover(function(){
jQuery('.image_rollover img').hide();
jQuery('.image_rollover img:nth-child('+current_image+')').show();
current_image = current_image + 1;
if (current_image == 7)
current_image = 1;
},function(){});
});

jsFiddle demo
$('.image_rollover').hover(function(){
$("img:first", this).appendTo(this);
});

If you are looking with some animation. Try this.
$(document).ready(function () {
var $siblings = $("#image_one").siblings();
$siblings.hide();
$("#image_one").on("mouseenter", function () {
var timer = 100;
var showTime = 0;
$siblings.each(function () {
showTime += timer;
$(this).fadeIn(showTime).show()
})
});
});
Or If you wants a chain kind of animation try this:
So if you hover on first image, then second will appear, then if on second then third and so on.. is it what you are looking for??
$(document).ready(function () {
var $siblings = $("#image_one").siblings();
$siblings.hide();
var timer = 500;
var showTime = 0;
function init_chain(ev){
showTime += timer;
var $next_element = $(ev.target).next()
$next_element.fadeIn(showTime).show();
$next_element.bind("mouseenter",init_chain);
};
$("#image_one").on("mouseenter", function (event) {
init_chain(event);
});
});
Let us know.
Thanks!

Related

how to loop fadeout Need change div img

I need loop this script, but i don't know how to do this...
$(zaj).ready(function(){
$("#zaj1").fadeOut(6000);
$('#zaj2').delay(7000).fadeOut(6000);
$('#zaj1').delay(7000).fadeIn(6000);
});
And I want to loop this. This is changing background img for div.
Try:
$(zaj).ready(function(){
var flag = 1;
do{
$("#zaj1").fadeOut(6000function(){
$('#zaj2').delay(7000).fadeOut(6000, function(){
$('#zaj1').delay(7000).fadeIn(6000);
});
});
}while(flag ==1);
});
but again, it do what you ask but you could find better ways... like:
$(zaj).ready(function(){
setInterval(function(){
$("#zaj1").fadeOut(6000, function(){
$('#zaj2').fadeOut(6000, function(){
$('#zaj1').fadeIn(6000);
});
});
}, 19000);
});
Cleaner code so it has clean recursive loop
https://jsfiddle.net/egwmpsa7/
function start() {
$("#first").fadeOut(1000, function() {
$('#second').delay(1500).fadeOut(1000);
$('#first').delay(1500).fadeIn(1000, function() {
$('#second').delay(1500).fadeIn(1000, start);
setTimeout(start, 1500)
});
})
}
start();
<div id="first">first</div>
<div id="second">second</div>
my solution:
function() {
$('#zaj1').fadeIn(1000).delay(2000).fadeOut(1000, function() {
$('#zaj2').fadeIn(1000).delay(2000).fadeOut(1000);
})
}
$(document).ready(function(){
setInterval(fades, 8000);
fades();
});
HTML:
<p id='zaj1' style="display: none;">
zaj1
</p>
<p id='zaj2' style="display: none;">
zaj2
</p>
demo: https://jsfiddle.net/gjfg22bz/4/
This can be done for quick scaling as you add more possible images. All you have to do is customize the variables here at the top, and you're done. The function will handle the rest.
var images = ['#zaj1', '#zaj2']; // Add as many as you want
var delayTime = 1000; // The time the image shows before starting the fade process
var fadeTime = 6000; // How fast the fadein/out should happen
var currentIndex = 0;
function loopOverImages() {
$(images[currentIndex]).delay(delayTime).fadeOut(fadeTime, function () {
++currentIndex;
if (currentIndex == images.length) {
currentIndex = 0;
}
$(images[currentIndex]).fadeIn(fadeTime, loopOverImages);
});
}
loopOverImages(); // Call immediately to start the process
Check out the really simple code snippet to help illustrate how simple this can be:
var images = ['#zaj1', '#zaj2', '#zaj3'];
var currentIndex = 0;
var delayTime = 2000;
var fadeTime = 1000;
function loopOverImages() {
$(images[currentIndex]).delay(delayTime).fadeOut(fadeTime, function() {
++currentIndex;
if (currentIndex == images.length) {
currentIndex = 0;
}
$(images[currentIndex]).fadeIn(fadeTime, loopOverImages);
});
}
loopOverImages();
div {
width: 100px;
height: 100px;
display: none;
}
#zaj1 {
background-color: rebeccapurple;
display: block;
}
#zaj2 {
background-color: #f08e86;
}
#zaj3 {
background-color: aqua;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<div id="zaj1"></div>
<div id="zaj2"></div>
<div id="zaj3"></div>
Select the elements to be looped through.
Initiate a variable for storing which element is visible now
Loop through using setInterval
update 'current' after each run
$("document").ready(function(){
var elements=$("#zaj1, #zaj2, #zaj3");
current=0;
elements.eq(current).fadeIn(6000);
setInterval(function(){
var next=current+1>elements.length-1?0:current+1;
elements.eq(current).fadeOut(6000);
elements.eq(next).fadeIn(6000);
current=next;
},7000);
});
[id^=zaj]{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="zaj1">One</div>
<div id="zaj2">Two</div>
<div id="zaj3">Three</div>

stop blinking text javascript

I have made a short script, where a text is blinking. But I cannot really figure out how I can stop the blinking after fx 3 blinks. Does anybody know how I can add that to my script?
Best Regards Julie
HTML
<div class="blink">blinking text</div>
non-blinking
<div class="blink">more blinking text</div>
CSS:
.flash{
background: yellow;
}
.noflash{
background: white;
}
JS:
function blink(selector){
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
blink('.blink');
function blink(selector, repeat){
if(!repeat) return;
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this, repeat - 1);
});
});
}
blink('.blink', 3);
So you can control how many times it will blink.
You can build chain of effects without recursion:
function blink(selector){
var chain = $(selector);
for (var i = 0; i < 3; i++) {
chain = chain.fadeOut('slow').fadeIn('slow');
}
}
blink('.blink');
You could try something like this (untested):
function blink(selector, count){
count = count || 1;
if (count <= 3) {
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this, ++count);
});
});
}
}

Stop continuous jQuery each() function on click and add active class

I have a jQuery each() function that loops through a set of three divs adding active to the items within the divs. I'm able to stop the loop on click for my function, but I'm having a hard time making it so that when you click on one of the items of a div, the other items that have the same class stays active. I know I can do it with if statements, but I'm having a hard time figuring it out.
HTML:
<div class="list-items loop-set">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
<div class="list-items loop-set">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
<div class="list-items loop-set">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
my function:
function doLoop() {
var $one = $('.one');
var $two = $('.two');
var $three = $('.three');
var interval = setInterval(function () {
$('.loop-set').each(function () {
var $set = $(this);
var $cur = $set.find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
$next.addClass('active');
});
}, 1000);
$('.loop-set').on('click', '> *', function () {
var $this = $(this);
$('.loop-set .active').removeClass('active');
if ($this == $one) {
$one.addClass('active');
} else if ($this == $two) {
$two.addClass('active');
} else if ($this == $three) {
$three.addClass('active');
}
clearInterval(interval);
});;
}
doLoop()
I included my code on this fiddle. Any help/advice would be greatly appreciated!
Try
$('.loop-set').on('click', '> *', function () {
var $this = $(this);
$('.loop-set .active').removeClass('active');
$('.loop-set .'+this.className).addClass('active');
clearInterval(interval);
});
Demo: Fiddle
What about this more simplier code: http://jqversion.com/#!/ndZt3Zz/1
Is this the behaviour you want?
$('.loop-set').change(function () {
var $set = $(this);
var $cur = $set.find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
$next.addClass('active');
});
var interval = setInterval(function(){
$('.loop-set').trigger('change');
}, 1000);
$('.loop-set > div').click(function(){
clearInterval(interval);
$('.loop-set > div').removeClass('active');
$('.' + $(this).attr('class')).addClass('active');
});
What about changing the onClick to something like this:
$('.loop-set').on('click', function () {
var $this = $(this);
$('.loop-set.active').removeClass('active');
$this.addClass("active");
clearInterval(interval);
});
What it does is it adds active class to loop-set making all of its children bolded. When you click another group - the highlight changes as well.
Here is the updated jsfiddle: http://jsfiddle.net/sL95U/5/. Hope it helps.

jQuery switch image with fade

I have a script which changes some images on hover. Works really well, however I would like to add a little fade between the two images. Here is the script. Really new to jQuery so I'm a little confused where to add it. Any help would be appreciated
jQuery(document).ready(function ($) {
var img_src = "";
var new_src = "";
$(".rollover").hover(function () {
img_src = $(this).attr('src');
new_src = $(this).attr('rel');
$(this).attr('src', new_src);
$(this).attr('rel', img_src);
}, function () {
$(this).attr('src', img_src);
$(this).attr('rel', new_src);
});
//preload images
var cache = new Array();
//cycle through all rollover elements and add rollover img src to cache array
$(".rollover").each(function () {
var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr('rel');
cache.push(cacheImage);
});
function imageSwitch(img) {
var src = img.attr('src');
var rel = img.attr('rel');
img.fadeOut('fast', function() {
img.attr('src', rel);
img.attr('rel', src);
img.fadeIn('fast');
});
}
$(".rollover").on('mouseenter', function() {
imageSwitch($(this));
});
a small search give me that : http://www.simonbattersby.com/demos/crossfade_demo_basic.htm i think it's kinda what you're looking for.
or else you with thread that do something also :
jQuery Change Image src with Fade Effect
it would be better to use .mouseenter for this.
and you could do .animate() opacity to 0 and in the call back you would change the image src, so that the src change after the animation ended.
$('.rollover').mouseenter(function () {
var me = $(this),
new_src = me.attr('rel'),
anmiation_duration = 300; // 300ms
me.animate({
opacity: 0
}, anmiation_duration, function () {
me.attr('src', new_src).css({'opacity':'1'});
})
});
After the src is changed you can do another .animate() to set the opacity back to 1.
I would however suggest to have the other image already displayed behind the first image, (images placed over each other using position:absolut). That way the opacity change would create sort of morf effect.
Briefly tested, thanks to #Oksid for the mouseenter comment.
EDITED
The HTML:
<img class="front rollover" src="http://placehold.it/350x150/006699" rel="http://placehold.it/350x150/000000" />
The CSS:
.image_holder {
position: relative;
}
.image_holder img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.image_holder img.front {
z-index: 2 !important;
}
The jQuery:
function init_rollovers() {
$(".rollover").each(function() {
var w = $(this).width()+'px';
var h = $(this).height()+'px';
var src = $(this).attr('src');
var rel = $(this).attr('rel');
$(this).addClass('shown');
if (!$(this).parents('.image_holder').length) {
$(this).wrap('<div class="image_holder" style="width:'+w+';height:'+h+';"></div>');
$(this).parents('.image_holder').append('<img src="'+rel+'" />');
}
});
}
init_rollovers();
function doImageSwitch(el, speed=425) {
var front = el.find(".front");
if (front.hasClass('shown')) {
front.fadeTo(speed, 0, function() {
$(this).removeClass('shown');
});
}
else {
front.animate({
opacity: 1
}, speed, function() {
$(this).addClass('shown');
});
}
}
$(document).on('mouseenter', '.image_holder', function() {
doImageSwitch($(this));
});

jQuery Show/Hide divs one at a time

I have slightly modified the code in this post jQuery div content partial hide, show all to show/hide a list of div's on my page.
I am still learning jQuery and am trying to figure out how I can modify the code so that when I open one div, it will close any other's that are open.
Thanks a lot for any help. Here is my code block:
function setScroll(){
var slideHeight = 80;
$(".container").each(function() {
var $this = $(this);
var $wrap = $this.children(".wrap");
var defHeight = $wrap.height();
if (defHeight >= slideHeight) {
var $readMore = $this.find(".heading");
$wrap.css("height", slideHeight + "px");
$readMore.append("<div id='clickButton' class='expand-div'>Click for More Info</div>");
$readMore.children("#clickButton").bind("click", function(event) {
var curHeight = $wrap.height();
if (curHeight == slideHeight) {
$wrap.animate({
height: defHeight
}, "normal");
$(this).removeClass("expand-div").addClass("collapse-div");
$(this).text("Close");
$wrap.children(".gradient").fadeOut();
} else {
$wrap.animate({
height: slideHeight
}, "normal");
$(this).removeClass("collapse-div").addClass("expand-div");
$(this).text("Click for More Info");
$wrap.children(".gradient").fadeIn();
}
return false;
});
}
});
}
Simple example (jsfiddle) demonstrates closing all and opening one.
var divs = $('div.highlander').hide();
var which = divs.length;
$('#cycler').click(function () {
which += 1;
if (which >= divs.length) {
which = 0;
}
divs.hide();
divs.eq(which).show();
});
Roy's answer is good. I have another example of something you could do. A little bit more general and possible easier to understand. http://jsfiddle.net/sFR6Q/2/
<button class="show1">show1</button>
<button class="show2">show2</button>
<button class="show3">show3</button>
<button class="show4">show4</button>
<div class="show1">1</div>
<div class="show2">2</div>
<div class="show3">3</div>
<div class="show4">4</div>
var divs = $("div")
$('button').click(function () {
divs.hide();
$("div." + $(this).attr("class")).show();
});
First close all the div's irrespective of if they are open or closed.
Then just open the div you need.

Categories

Resources