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>
Related
Click on the 5 and it will become 7-9-11...
I'm expecting 6-7-8...
Any help?
function go_plus(e) {
let obj = $(e.target);
let a = parseInt(obj.text());
a += 1;
obj.text(a);
}
var setint = '';
function go_spinn(e) {
setint = setInterval(function() {
go_plus(e);
}, 79);
}
$('#count').on('mouseleave mouseup', function() {
clearInterval(setint);
});
#count {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='count' onclick='go_plus(event)' onmousedown='go_spinn(event)'>5</div>
So the problem is you can "slow-click" things - hold the mousedown for a second or two, then let it go, and still result in a click.
The best way to solve the problem is to put a timeout before go_spin starts that you can clear when you click.
The drawback is your go_spinn doesn't start up as fast - i.e. you need to hold the mouse down for the duration of your timeout, in my example it was 200ms, before your go_spinn starts. Test it, you might be able to drop it back a little bit (to 150ms or so) to achieve what you want.
EDIT: By the way, I was just making an assumption on what you were trying to achieve - what were you actually trying to achieve with this code?
function go_plus(e){
let obj = $(e.target);
let a = parseInt(obj.text());
a += 1;
obj.text(a);
}
var setint = '';
var startspin;
function go_spinn(e){
startspin = setTimeout(function() {
setint = setInterval(function(){go_plus(e);}, 79);
},200);
}
$('#count').on('click mouseleave mouseup', function(){
clearInterval(setint);
clearInterval(startspin);
});
#count{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='count' onclick='go_plus(event)' onmousedown='go_spinn(event)'>5</div>
Just change your html code to <div id='count' onmousedown='go_spinn(event)'>5</div> so that you remove the onclick event.
Lets say I have some element with id="circle" and some button with id="button". All I need to do is:
Circle is blinking by default;
When user presses the button, circle stops blinking;
When user presses the button once more, circle starts blinking;
And so on.
I am trying to do this with the following code:
var blinking = true;
function flash(elementId) {
var bl = document.getElementById(elementId);
bl.style.visibility = bl.style.visibility == "hidden" ? "visible" : "hidden";
}
function buttonClick() {
if (blinking) {
clearInterval(flash('circle'));
} else {
setInterval(flash('circle'), 200);
}
}
setInterval(flash('circle'), 200);
<!DOCTYPE html>
<html>
<body>
<strong id="circle">●</strong>
<br>
<button type="button" id="leftButton" onclick="buttonClick()">toggle</button>
</body>
</html>
but it doesnt work in desirable way. If the solution's code in pure JS will be too large, you can write it with jquery, it doesnt really matter.
You are calling the flash method, instead you need to provide a callback to setIterval. Also you should store an interval handler to some variable, and use it when calling clearInterval. Last thing that is missing in your code is toggling the blinking boolean value on each click.
var interval;
function buttonClick() {
if (blinking) {
clearInterval(interval);
} else {
interval = setInterval(flash.bind(null, 'circle'), 200);
}
blinking = !blinking;
}
buttonClick();
Or you could simply use function(){}, like this:
interval = setInterval(function() {
flash('circle');
}, 200);
var blinkingInter = null,
circle = document.querySelector('#circle');
//#param ele element object
function toggleCircle(ele) {
ele.classList.toggle('hidden');
}
// first parameter of setInterval is function
blinkingInter = setInterval(function() {toggleCircle(circle)},
200);
function buttonClick() {
if(blinkingInter !== null) {
clearInterval(blinkingInter);
// set blinkingInter to null
blinkingInter = null;
} else {
blinkingInter = setInterval(function() {
toggleCircle(circle)}, 200);
}
}
This code is used with both jquery and css:
the css:
#keyframes blink {
0%{opacity: 0.0;}
50%{opacity: 1.0;}
100%{opacity: 0.0;}
}
.circle {
display: inline-block;
background: #f00;
width:30px;
height:30px;
border-radius:15px;
margin:auto;
margin-top: 20px;
margin-bottom: 20px;
}
.circle.blinker {
animation: blink .3s infinite;
}
.jdhf {
background: blue;
}
And the jquery:
$("*").on("click","#button", function(e){
e.stopPropagation();
//verify if the div is blinking and then stop blinking
var f=$(".blinker").length;
if(f>0){
$("#circle").removeClass("blinker");
}
else {
$("#circle").addClass("blinker");
}
});
The html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div id="circle" class="circle blinker">
</div>
<button id="button" class="jdhf">
Toggle animation
</button>
Try it here: https://jsfiddle.net/amostk/ev5uusra/3/
Since toggle is not used for two functions anymore, you need to set a variable (either class or hidden tag) for switching. This example shows hidden input instead of a variable (since Boolean variable would not be flexible for multiple buttons, and using opacity blink as a cool option which I found somewhere else here on Stack.
<div id="circle">
text
</div>
<div id="button">
<input type="hidden" value=0 />
button
</div>
<script>
var circle = setInterval(function(){blink()}, 1000);
function blink() {
$("#circle").fadeTo(100, 0.1).fadeTo(200, 1.0);
}
$("#button").click(function() {
var a = $(this).find("input[type='hidden']").val() == 0 ? 1 : 0;
if ( a == 1 ) {
clearInterval(circle);
}else {
circle = setInterval(function(){blink()}, 1000);
}
$(this).find("input[type='hidden']").val(a);
});
</script>
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);
});
});
}
}
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!
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));
});