I have here a slider, built only with HTML and CSS, but it's not auto sliding.
I thought maybe some Jquery will help.
I have a Fade In, Fade Out function but it it's turning the black background while it's changing. And I don't like that!
function InOut(elem) {
var delayOn = 3000, // time each <li> should be visible
delayOff = 0, // time between revealing each <li>
fade = 1000; // fade duration
// Pause, fade in, pause again, fadeout, then fire the callback
elem.delay(delayOff).fadeIn(fade).delay(delayOn).fadeOut(function() {
// If we're not on the last <li>
if (elem.next().length > 0) {
// Call InOut on the next <li>
InOut(elem.next());
}
else {
// Else go back to the start
InOut(elem.siblings(':first'));
}
});
}
$(function() {
// Hide all the li's
$('#slider li').hide();
// Call InOut to loop through them
InOut($('#slider li:first'));
});
Please look at this JSFiddle and let me know how I can do this, a sliding animation will work also, thanks!
PS: If you want to look how is sliding only with CSS, just delete de JS function!
If I understand your question correctly, this may be a solution for you:
Demo Fiddle
It looks like your #slideshow-inner CSS has the background set to black, simply change it to the color you want.
CSS:
#slideshow-inner {
//current styles
background-color: rgba(255,255,240,1);
}
Related
I'm stuck in a drupal project, I would like to know how to get this effect done please, the left image will expand to right on click and same I want to the right image which will expand left on click, I want to know if it can be done by css3 only or javascript needed and how please... here are two image for my issue, I am mainly as front-end developer and know little of backend, so if anyone can help please..!
http://s14.postimg.org/aahx57ke9/img.png
If you want the image to slide and stay in that position after letting go of the mouse button, you have to use JavaScript.
I recommend jQuery. Here is an example illustrating how you can use JavaScript to slide elements and seamlessly superimpose them over each other, with jQuery animations; the JFiddle link at the bottom will show you the HTML, CSS, and JavaScript. It should be perfectly applicable to your image situation, assuming the images are positioned absolute.
JavaScript:
var b1 = $('#block1');
var b2 = $('#block2');
function slide(block, left, callback)
{
block.animate({
'left': left
}, 750, function() {
// Do this after finished animating.
if (callback) callback();
});
}
b1.on('click', function() {
// Only slide if not already done.
if (b1.css('left') != '-50px') {
// First slide both elements so they meet at the,
// middle, then switching the z-index is not noticeable.
slide(b1, '-250px');
slide(b2, '250px', function() {
// After animating, superimpose b1 over b2
// by changing z-index order, then animate
// the rest of the way.
b1.css('z-index', '1');
b2.css('z-index', '0');
slide(b1, '-50px');
});
}
});
b2.on('click', function() {
// Same here but with right element.
if (b2.css('left') != '50px') {
slide(b1, '-250px');
slide(b2, '250px', function() {
b1.css('z-index', '0');
b2.css('z-index', '1');
slide(b2, '50px');
});
}
});
Check it out in action here: https://jsfiddle.net/86sr3okk/6/
Welcome to the wonderful world of JavaScript.
Using a basic JSSOR Slideshow, with n div image placeholders, where the divs are read in descending or top-down order, just like any other normal HTML page, I can add javascript into a div, or add javascript somewhere else on the page to make something happen within a slide div (animation, fade, etc.).
The problem is it will trigger once, as when the document is loaded. How do I make a javascript function "re-triggerable", so that it is called when that one slide (let's say slide #2) appears in the display loop?
Feel free to ask more questions if this is not clear enough.
Here's an example: Slide Show On the first slide appearance, a gold medal scrolls to the middle of the slide, using jQuery animate(). It will only do this once, not each time the slide appears. The reason is that the gold medal animate script only loads once, when the html page is loaded. I want that gold medal animate script to reload again and again, each time slide #1 makes its appearance.
Please do this job when slideshow plays over at slide 0.
var jssor_slider1 = new $JssorSlider$(...;
function SlideshowEndEventHandler(slideIndex, progressBegin, slideshowBegin, slideshowEnd, progressEnd) {
if (slideIndex == 0) {
//runs the animation when slideshow plays over at slide 0
$("#goldmedal").animate({
opacity: 0.99,
left: "+=490",
height: "toggle"
}, 2500, function () {
// Animation complete.
$("#goldmedal").animate({ opacity: 0.0 }, 4000, function () {
$("#goldmedal").css("left", "0px");
});
});
}
}
jssor_slider1.$On($JssorSlider$.$EVT_SLIDESHOW_END, SlideshowEndEventHandler);
//As it would not play slideshow at the beginning for slide 0, make a manual trigger at the beginning then.
SlideshowEndEventHandler(0);
I have a simple onScroll function, which shows a DIV when the scroll (down) height is 100 for example, and then if scrolled up soon as it reach 100 it hides the div, works perfect.
However, if I scroll down quickly and while its showing the DIV if I quickly scroll up & down 2 three times, it doesn't catch the event, even if its up again, it still shows the DIV, but again if I scroll even 1 pixel down, it hides it and if reaches 100 then it shows DIV again.. I hope I made it clear, I dont have an online demo as I am working on localhost.. below is my function that I am using standalone in the template within just <*script> tag..
jQuery(document).scroll(function ($) {
var y = jQuery(this).scrollTop();
var hoffset = 100;
if (y > hoffset) {
// show div
} else {
// hide div
}
});
Can someone please guide me to right direction, what other best approaches can be done for this, basically I am doing this for header nav div..
regards
Do you want like this? See my Fiddle
I use fadeIn() and fadeOut() instead.
The only way I found to stop animation, while its in the process is below and works..
jQuery('.thedivclass').stop(false, true).slideDown();
I would like to change an image in my site with fading effect. The thing is that I am using two different classes for the same div, so actually I want to fade out one class and in the meanwhile start fading in the second class, before the first one has been completely removed.
HTML:
<div id="background_image" class="day"></div>
CSS:
.day{
background: url(day.png);
}
.night {
background: url(night.png);
}
JQuery:
setTimeout(function(){
if($("#background_image").hasClass("day")){
$("#background_image").fadeOut(function() {
$(this).removeClass("day");
});
$("#Landscape").fadeIn(function() {
$(this).addClass("night");
});
}else{
$("#background_image").fadeOut(function() {
$(this).removeClass("night");
});
$("#Landscape").fadeIn(function() {
$(this).addClass("day");
});
}
}, 5000);
But this code makes the image "day.png" first to disappear completely and then the "night.png" comes which is not what I want.
Is there a way to fade out the class "day" and start fade it "night" without having a blank space between the fading? Thanks in advance
It seems that what you're trying to do is cross-fading. This is normally done using 2 divs. If this is for the entire background, then I suggest http://srobbin.com/jquery-plugins/backstretch/. You can take a look at their implementation to narrow it down to just a div if you don't need it to cover the entire background.
This is how I solved it for a similar case.
var images = [
"/content/images/crane1.jpg",
"/content/images/crane2.jpg",
"/content/images/crane-interior.jpg"
];
// The index variable will keep track of which image is currently showing
var index = 0;
// Call backstretch for the first time,
// In this case, I'm settings speed of 500ms for a fadeIn effect between images.
$.backstretch(images[index], { speed: 500 });
// Set an interval that increments the index and sets the new image
// Note: The fadeIn speed set above will be inherited
setInterval(function () {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
EDIT:
For non-full background, take a look at this post Crossfade Background images using jQuery
Also take a look at this, might be closer to your scenario Cross fade background-image with jQuery
On my page, when the user gets to say 1000 pixels scrolled down the page, my navigation fades out, when i scroll back up the navigation fades in. Im using the following which works perfectly...
// Fade Navigation
if(!$('nav ul').is(':visible')) {
$('nav ul').stop().fadeIn(500);
} else {
$('nav ul').stop().fadeOut(500);
}
My only problem is that if you scroll really quickly, the animation doesnt know if its visible or not, is there a way to stop this?
If you pass in true as a second parameter to .stop(), it'll stop the animation and jump the element to the state it should be in if the animation actually finished.
i.e. if you call $('nav ul').stop(true, true).fadeIn(500) while an element is fading out, it will stop the fade out, and make it jump to it's logical end (which is completely faded out) before starting the .fadeIn() animation.
Using that, you should be able to get away with the following instead of your code block above:
$('nav ul').stop(true, true).fadeToggle(500);
It'll look a little jerky though, but you can work around it with a bit more complicated logic.
I've been playing around with this. See comments in code.
<nav class="main">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</nav>
<script type="text/javascript">
// Do this outside of the onscroll handler. onscroll is fired a lot,
// so performance will slow if you're having to create jq instances
// or navigate the dom several times
var $wnd = $(window);
var $nav = $('nav.main');
// Added this to block the main handler from executing
// while we are fading in or out...in attempt
// to smooth the animation
var blockHandler = false;
window.onscroll = function () {
if (!blockHandler) {
blockHandler = true;
// I've used 50 here, but calc the offset of your nav
// and add the height to it. Or, maybe just half the
// height to it so you can see the animation.
if ($wnd.scrollTop() < 50) {
$nav.fadeIn(500, function () {
blockHandler = false;
});
} else {
$nav.fadeOut(500, function () {
blockHandler = false;
});
}
}
};
</script>