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);
});
});
}
}
Related
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>
I made a slideshow with php and javascript and it slides the images just fine , but i'm a bit stuck at the back and forward functionalities and i would be grateful if you could help me a bit here.This is what i've done so far:
PHP:
$dir = 'images/slideshow';
$images = scandir($dir);
$i = 0;
echo '<div id="slideshow-wrapper">';
echo '<div id="slideshow-beta">';
foreach($images as $img){
if ($img != '.' && $img != '..') {
$i++;
echo '<img src="../images/slideshow/'.$img.'" class="img_'.$i.'">';
}
}
echo '</div>';
echo '<div id="slideshow-controller">';
echo '<div class="left-arrow-div"><span class="left-arrow" onclick="SlideShow(-1);"></span></div>';
echo '<div class="right-arrow-div"><span class="right-arrow" onclick="SlideShow(1);"></span></div>';
echo '</div>';
echo '</div>';
Javascript:
var i=1;
var begin=true;
function SlideShow(x){
if(x==-1){
i--;
}else if(x==1){
i++;
}
var total=$('#slideshow-beta img').length;
for(var j=1;j<=total;j++){
if($('.img_'+j).css('display')!='none'){
begin=false;
break;
}else{
begin=true;
}
}
if(i>total){
i=1;
$('.img_'+total).fadeOut(1000,function(){
$('.img_'+i).fadeIn(1000);
});
}else if(begin){
$('.img_'+i).show();
}else if(!begin){
$('.img_'+(i-1)).fadeOut(1000,function(){
$('.img_'+i).fadeIn(1000);
});
}
setTimeout(function(){
i++;
SlideShow(x);
},5000);
}
HTML:
<body onload="SlideShow(false);">
As you can see i tried to make an onclick event to change the 'i' value on run , though the value is changed , the image is not . Maybe because pressing back/forward calls another instance of the function instead of overwriting it.I don't know for sure , i'm lost on this one.
Here's a fiddle
I've made a major overhaul, but the idea stays the same (fiddle):
Changes to CSS:
.left-arrow, .right-arrow {
cursor: pointer;
/** display: none **/
}
#slideshow-controller {
z-index: 2;
position: absolute;
/** added **/
opacity: 0;
transition: opacity 300ms ease-in;
/***********/
}
#slideshow-wrapper:hover > #slideshow-controller {
opacity: 1;
}
Changes to HTML (removed inline onClick):
<div class="left-arrow-div"><span class="left-arrow">Back</span>
</div>
<div class="right-arrow-div"><span class="right-arrow">Forward</span>
</div>
Javascript:
var i = 0;
var images = $('#slideshow-beta img'); // cache all images
var total = images.length;
var timeout;
/*** hide all images at the start ***/
images.each(function (index) {
$(this).css({
display: 'none'
});
});
/*** bind event handlers to arrows ***/
$('.left-arrow').click(function () {
SlideShow(-1);
});
$('.right-arrow').click(function () {
SlideShow(1);
});
/*** Start the slideshow on 1st image ***/
SlideShow(0);
function SlideShow(x) {
if (isNaN(x)) { // throw error if x is not a number
throw new Error("x must be a number");
}
clearTimeout(timeout); // clear previous timeout if any to prevent multiple timeouts running
var current = (total + i + x % total) % total; // get the current image index
$(images[i]).fadeOut(1000, function () { // fade out the previous
$(images[current]).fadeIn(1000); // fade in the current
});
i = current; // set i to be the current
timeout = setTimeout(function () { // cache the timeout identifier so we can clean it
SlideShow(1);
}, 5000);
}
I have fixed your problems - the main problem was that you call the function inline - but the function doesn't exist at this moment (the milliseconds in pageload). The other one was your if (now with 3 = that includes the type - because false, 0, -1 and so on are "the same".
The only problem now is that the interval runs infinitely and can call the next image instantly after a manual change.
In conclusion I recommend you to use a library like cycle2 or anything like this.
https://jsfiddle.net/Lroatbzg/15/
jQuery(window).on('load', function() {
$("#slideshow-wrapper").hover(function(){
$(".left-arrow,.right-arrow").fadeIn();
}, function(){
$(".left-arrow,.right-arrow").fadeOut();
});
var i=1;
var total = $('#slideshow-beta img').length;
function SlideShow(x) {
if(x === -1) {
i--;
} else if(x === 1) {
i++;
}
if(i > total) {
i = 1;
}
$('#slideshow-beta img').hide();
$('#slideshow-beta .img_' + i).fadeIn(1000);
}
setInterval(function() {
i++;
SlideShow(i);
}, 5000);
jQuery('.left-arrow-div').on('click', function() {
SlideShow(-1);
});
jQuery('.right-arrow-div').on('click', function() {
SlideShow(1);
});
SlideShow(false);
});
Your fiddle throws a ReferenceError: SlideShow is not defined (Firefox using Firebug).
Try replacing function SlideShow(x){...} with SlideShow = function (x) {...} (https://jsfiddle.net/Lroatbzg/12/).
Honestly I don't know why the latter works, as those two statements are equivalent to me (any explanation on that?).
Declaring your function the other way around gets rid of the error - at least in my browser.
use
if(x=='-1'){
i--;
}else if(x=='1'){
i++;
}
instead of
if(x==-1){
i--;
}else if(x==1){
i++;
}
The problem is that the setTimeOut will execute the function SlideShow delayed. However, when you click a button, this delayed execution is not stopped. To stop this execution, I made a small change to the code. Furthermore, I solved the ReferenceError in jsfiddle by launching the onClick-functionality through jQuery.
This result can be checked here: https://jsfiddle.net/Lroatbzg/13/
$("#slideshow-wrapper").hover(function(){
$(".left-arrow,.right-arrow").fadeIn();
}, function(){
$(".left-arrow,.right-arrow").fadeOut();
});
var i=1;
var direction=1;
var begin=true;
var latest=Math.random();
function SlideShow(parameter){
if(latest!=parameter)
return; //Return when this function is not called through the last click or timeout.
var total=$('#slideshow-beta img').length;
i=i+direction;
if(i>total)
i=1;
if(i<1)
i=total;
begin=true;
for(var j=1;j<=total;j++)
{
if($('.img_'+j).css('display')!='none')
{
begin=false;
$('.img_'+total).fadeOut(1000,function(){
$('.img_'+j).css('display','none');
$('.img_'+i).fadeIn(1000);
});
break;
}
}
if(begin)
$('.img_'+i).show();
setTimeout(function(){
SlideShow(parameter);
},5000);
}
SlideShow(latest);
$("#left").click(function(){ latest=Math.random(); direction=-1; SlideShow(latest); });
$("#right").click(function(){ latest=Math.random(); direction=1; SlideShow(latest); });
The HTML is changed as follows:
<div id="slideshow-controller">
<div class="left-arrow-div" id="left"><span class="left-arrow">Back</span></div>
<div class="right-arrow-div" id="right"><span class="right-arrow">Forward</span></div>
</div>
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 am a beginner in JavaScript and jQuery, and I would like to have an idea to how to proceed with this part of a code,
I have a function with a callback, for example:
myFunc(elem, callback) {
$(elem).fadeIn(function(){ callback(); });
}
and I want to run this function for elements that are in an array:
elems = ['#elem1', '#elem2_3', '#elem4_5', '#elem3', '#elem_five'];
but, I want to execute this function for each element of the array, one by one through the callback.
eg. once #elem1 has fadein, it must fadein second element ..etc
now I proceed like this:
I have tried to do a for loop, but they are executed in the same time.
for (i = 0; i < elems.length; i++) {
myFunc(elem[i], function(){
if (elem[i+1]) {
myFunc(elem[i+1]);
}
});
}
So how would you proceed?
Do like this, A recursive solution for your problem,
function myFunc(elems, cnt)
{
if(cnt > (elems.length - 1)) { return; }
$(elems[cnt]).fadeIn("slow", function(){ myFunc(elems , ++cnt); });
}
myFunc(['#elem1', '#elem2_3', '#elem4_5', '#elem3', '#elem_five'], 0);
DEMO
Update on link:
http://jsfiddle.net/kuw6tt92/1/
function fadeIn(selectors) {
var elements = Array.prototype.slice.call($(selectors));
function fade() {
jQuery(elements.shift()).fadeIn("slow", fade);
}
fade();
}
fadeIn("div");
try
var elems = ['#elem1', '#elem2_3', '#elem4_5', '#elem3', '#elem_five'];
var len = elems.length;
function myFunc(index) {
$(elems[index]).fadeIn(function () {
if (len > ++index) myFunc(index);
return;
});
}
myFunc(0);
DEMO
I am trying to make an element 'vibrate' using JavaScript upon clicking it by repetitively changing the value of document.getElementById("ElementID").style.left. I change it a number of times in a particular function, but instead of moving each time I change it, it only moves at the end of the function i.e. the last time I make the change. Here is the HTML code:
<html>
<body>
<script>
function changePosition() {
if (document.getElementById("ElementID").style.left == "50%") {
document.getElementById("ElementID").style.left = "52%";
} else {
document.getElementById("ElementID").style.left = "50%";
}
}
function vibrate() {
changePosition();
setTimeout(changePosition, 50);
setTimeout(changePosition, 50);
setTimeout(changePosition, 50);
setTimeout(changePosition, 50);
}
</script>
<button id="ElementID" type="button" style="position:absolute; top:50%; left:50%;" onclick="vibrate()">Vibrate Me</button>
</body>
</html>
At the end I only see the position of the button as it should have been but I can't see the transition during the change. What am I doing wrong?
It seems that all timeouts will execute at the same time. Try changing to this
setTimeout(changePosition,100);
setTimeout(changePosition,200);
setTimeout(changePosition,300);
setTimeout(changePosition,400);
or
for (var i = 1; i < 5; i++) {
setTimeout(changePosition,100*i);
}
Heres an example using setInterval rather than timeout. Mess with the numbers and you should be able to get your desired result
http://jsbin.com/oSIXayun/4/
HTML:
<button id="ElementID" type="button" style="position:absolute; top:50%; left:50%;">Vibrate Me</button>
JS:
function changePosition() {
if (document.getElementById("ElementID").style.left=="50%") {
document.getElementById("ElementID").style.left="52%";
}
else {document.getElementById("ElementID").style.left="50%";}
}
function vibrate() {
changePosition();
setTimeout(changePosition,50);
setTimeout(changePosition,100);
setTimeout(changePosition,150);
setTimeout(changePosition,200);
}
document.getElementById("ElementID").onclick = vibrate;
:)
All the setTimeout calls within vibrate() are made at the same time. You can address this by calling changePosition() based on the number of vibrations you require and repeating the function using setTimeout.
(function () {
var vibrating = 0;
function changePosition() {
if (document.getElementById("ElementID").style.left == "50%") {
document.getElementById("ElementID").style.left = "52%";
} else {
document.getElementById("ElementID").style.left = "50%";
}
if (vibrating != 0) {
vibrating--;
var t = setTimeout(changePosition,50);
}
}
function vibrate() {
vibrating = 4;
changePosition();
}
document.getElementById('ElementID').onclick = vibrate;
})();