Making Nivo Slider Direction Navigation Arrow FADE In With jQuery
Can't get this... trying to make the direction navigation arrows on Nivo Slider fade in rather then just appear. Here's the code that hide/shows the directional nab:
//Hide Direction nav
if(settings.directionNavHide){
$('.nivo-directionNav', slider).hide();
slider.hover(funct开发者_开发知识库ion(){
$('.nivo-directionNav', slider).show();
}, function(){
$('.nivo-directionNav', slider).hide();
});
}
I'd assume it's as easy as changing .hide()
to .fadeOut('fast')
and .show()
to .fadeIn('fast')
. However, after the first slide change, they go back to just appearing. (see that issue here) How can I solve this? Here is the entire un-mified js file.
ETA: Just learned, the fade still goes during the transition from one slide to the next, and on the first slide before any transition. It would appear the transition effect breaks the fadein of the dir nav.
I have found a solution:
Ignore the nivo-slider code and right your own script.
Like so....
<script>
$(function(){
$('#slider').hover(function(){
$(".nivo-directionNav a").fadeIn('slow');
});
});
</script>
I couldn't get the mouse out function to work but it wasn't necssary for my purposes. Hope this helps.
There is a line of code in the un-minified JS that reads
slider.hover(function(){$('.nivo-directionNav',slider).show();
Try changing the show there to .fadeIn('fast') as well.
精彩评论