I have implemented a slideshow using Bootstrap Carousel. As you guys might now, this carousel is pretty basic so I wanted to add some eye candy to it.
Using the animate.css transitions, I wanted to only animate the first slide. I tried
$('.caption-wrapper').addClass('scrollpoint sp-effect3');
setTimeout(function () {
$('.caption-wrapper').removeClass('scrollpoint sp-effect3 animated fadeInDown');
}, 2000);
and it works! However, as you can see, I am adding and removing a class using the setTimeout function (which is kind of weird).
Is there a cleaner way to do this?
So basically, as mentioned by #isherwoord, I used Bootstrap carousel available events, in this case the "slide" event. Here's the answer:
$('#slideshow').on('slide.bs.carousel', function () {
$('.caption-wrapper').removeClass('scrollpoint sp-effect3 animated fadeInDown');
});
This a lot more elegant solution to what I originally had.
Are you looking for something like this:
$(document).ready(function() {
function slider(){
$('.caption-wrapper').addClass('scrollpoint sp-effect3',function(){
setTimeout(function () {
$('.caption-wrapper').removeClass('scrollpoint sp-effect3 animated fadeInDown');
}, 2000);
});
}
setInterval(slider,3000);
});
Related
I'm using mouseover effect on a table list to show content of lesson on hover.
However, as it's in table, it's "changing too fast", when going from one row to another, that is why I would like to put some delay on the mouseover effect.
My code currently looks like this :
onmouseover="show('id')" onmouseout="hide('id')">
How to make a small delay ?
A non jQuery solution, for reference:
<script>
var show=function(x)
{
setTimeout(
function()
{
do the stuff...
},
200
);
};
var hide=function(x)
{
setTimeout(
function()
{
do the other stuff...
},
200
);
};
</script>
<div onmouseover="show('id')" onmouseout="show('id')"></div>
Basically, I've defined show and hide as functions which create anonymous functions that do the actual showing and hiding and then run them after a 200ms delay using setTimeout.
An awesome plugin by brain if you use jquery to control your hover actions and timers.
http://cherne.net/brian/resources/jquery.hoverIntent.html
or you can just use vannilla javascript to set timers.
If you are working with jQuery's show and hide methods you can simply put the desired duration in ms between the brackets:
<div onmouseover="$('#id').show(600)" onmouseout="$('#id').hide(600)">
some content
</div>
So I'm currently working on a website wich uses an animated logo I made with JQUERY 1.10.2
How it works: I have an Acronym "AD" and as soon as the mouse is over one of the letters, the full name slides out from the right of each letter.
It goes like so AD -> A...D... -> AcusticDream.
If you do not understand here is a LIVE DEMO on my site http://acusticdream.tk/TEST/
My code is :
<script type="text/javascript">
$(function () {
$(".logo-firstletter").hover(function () {
$(".logo-full").animate({width: 'toggle'}, 500);
});
});
</script>
Feel free to also look at my page's source code to see.
The .logo-firstletter class is self explanatory and the .logo-full is the other letters.
Bug #1
So the BUG is, the animation works pefectly, but if you put your mouse in the right(not over the first letter anymore) it will just animate endlessly... Try it by yourself to see..
Bug #2
If you just move your mouse repeatedly over the letters of the logo, it seems jquery will memorize how many times you put the mouse over so it will continue to animate and animate until the "count" is over.
Any help is appreciated and if theres a better way to do this I would welcome it too!
Thanks in advance!
Maybe with this:
$(".logo-firstletter").hover(function () {
if($(".logo-full").is(":animated")) return; //Add this
$(".logo-full").animate({width: 'toggle'}, 500);
});
This way, we only animate if there is no current animation.
Edit:
Add a new wrapper element logo-container to your html, like this:
<div id="logo-container">
<div class="logo-firstletter">A</div>
<div class="logo-full">custic</div>
<div class="logo-firstletter">D</div>
<div class="logo-full">ream</div>
</div>
Then do:
$("#logo-container").hover(function () {
$(".logo-full").animate({width: 'show'}, 500);
},function () {
$(".logo-full").animate({width: 'hide'}, 500);
});
Hope this helps. Cheers
hoping someone can help.
I'm a javascript novice. I have a list of names that, when hovered over, display a box with that person's contact information.
The problem I'm having is that the box displays too fast; causing boxes to fire off rapidly when mousing over multiple names.
Link: http://law.nd.edu/faculty/
Here's what I believe is the relevant code:
<script>
jQuery(".directory-list li").hover(
function() {
jQuery(this).find(".directory-info").fadeIn(200); ;
},
function() {
jQuery(this).find(".directory-info").fadeOut(50);;
}
);
</script>
Thanks for any help.
Use hoverIntent instead.
There is a nice little plugin for it, that is the easiest way to do it.
http://cherne.net/brian/resources/jquery.hoverIntent.html
It will keep your elements from rapid-firing.
The easiest way would be to add a delay before your fadeIn:
jQuery(this).find(".directory-info").delay(300).fadeIn(200);
You can introduce a delay by using setTimeout as follows:
var hoverTimer;
jQuery(".directory-list li").hover(function() {
var elem = jQuery(this).find(".directory-info");
hoverTimer = setTimeout(function() {
elem.fadeIn(200);
}, 1000); // wait for one second and then fadeIn
},
function() {
clearTimeout(hoverTimer);
jQuery(this).find(".directory-info").fadeOut(50);
});
Check out this fiddle, think this is what you want. The other answer that uses timeoutes will loose the context of this inside the setTimeout() function and will not work.
http://jsfiddle.net/RZUVS/1/.
I'm using the Zurb 'Orbit' Javascript slider, http://www.zurb.com/playground/orbit-jquery-image-slider, and I'd like to fire my own javascript at it to manually advance the slider left or right.
Basically, I'd like to fill it with my content, then have that content 'slide' in an out of view depending on a user interactions with the page as a whole, not only on a timer function or clicking a navigational image as already provided by the library.
So if I have a link named 'myLink', then something like this...
$('#myLink').click(function() {
... code to advance javascript slider...
$('#content').orbit(?????);
});
Failing that, my 'content' is going to be an html form and other similar stuff, anyone know a good free library that already does what I want?
Get a reference to the orbit object using "afterLoadComplete":
var myOrbit;
$(".orbitSlides").orbit({
afterLoadComplete: function() {
myOrbit = this;
}
});
Then use the 'shift' function to change slides:
myOrbit.shift(1);
or
myOrbit.shift('prev');
or
myOrbit.shift('next');
The easiest way would be
$(".slider-nav .right").click();
to simulate the arrow being clicked. Change if necessary to account for using the bullet-navigation option.
I don't think you're going to get anything more elegant than that, because the plugin doesn't expose an API of any sort - it's all privately closured up in the plugin.
I use this
$('#next').click(function(){
$('#rotator').trigger("orbit.next");
})
$('#prev').click(function(){
$('#rotator').trigger("orbit.prev");
})
assuming the div #rotator is the orbit slider.
I couldn't get some of these other answers to work. I know it's a little hacky but I found this easiest:
HTML:
<p id='back'>Back</p>
<p id='next'>Next</p>
CSS: (if you use the built-in navigation_arrows: false;, navigation arrows are removed and can no longer be manipulated, so visibility: hidden; to the rescue!)
.orbit-prev, .orbit-next {
visibility: hidden;
}
jQuery:
$('#back').on('click', function() {
$('.orbit-next').click();
});
$('#next').on('click', function() {
$('.orbit-prev').click();
});
I am working over on of my student projects and I am new jquery, for the project I have to use jquery to enhance few function and I have learned much to carry out basic tasks, but I am stuck over something very confusing.
One my scripts actually changes the image of a div container at mouse over function, function is currently fine but make it feel a little beautiful I want to add transition affects to it either through fade in fade out functions or through animate but am unable to work it out with both. I searched over internet but here i am unable to relate those examples to mind here.
I just want to know where can I insert fade in fade out or animate function in this code, to give it a transitioning effect:
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
}, function () {
var dummyImg = $(this).attr("src");
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
});
});
Thank-you!
You want to access the callback function of the fadeIn and fadeOut functions, this will allow you to make changes to the src image and what not. it would look something like this ->
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
$(this).fadeIn('slow');
});
}, function () {
var dummyImg = $(this).attr("src");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
$(this).fadeIn('slow');
});
});
});
Maven,
Have you thought of using css webkit? This SO article goes into detail for crossfading images - at different rates. CSS Webkit Transition - Fade out slowly than Fade in
You can also make use of a basic event to fade-in/fade-out the image. This JQuery/JSFiddle SO article makes use of the this reference object: Jquery fadeOut on hover
The basic fade-in / fade-out structure from the JSFiddle.net documention is as follows:
$('#show').hover(function() {
$(this).stop(true).fadeTo("slow", 0);
}, function() {
$(this).stop(true).fadeTo("slow", 1);
});
~JOL
Personaly, I'd layer the two images (css) so the non-hover version is normally on top. Then
in the hover function, add a $(this).fadeOut('fast') so that the underlying image is displayed.
http://jsfiddle.net/Xm2Be/13/ There is an example how you could do that. Ofcourse, you can set lenght of fade effect by placing some number inside brackets. For examle .fadeToggle(5000) will have timing of 5 seconds.