How can I get these images to stop 'flickering' when they switch?
Tags: jquery,html,css
Problem :
I'm having some trouble with a jQuery image rotator. When the next/previous buttons are clicked twice quickly, the image flickers and you end up seeing both images. Any ideas on how to fix it?
Here's the HTML
<div id="prev">
<img id="prevListing" class="prevListing" src="..." onmouseover="this.src='...'" onmouseout="this.src='...'">
</div>
<div class="faded">
<div id="fader">
<img src="...">
<img src="...">
</div>
</div>
<div id="next">
<img id="nextListing" class="nextListing" src="..." onmouseover="this.src='...'" onmouseout="this.src='...'">
</div>
The CSS
.used {float:left; width:50%;}
.usedListingImage {width:65%;float:left; display:block; margin:-1% auto 0 auto; max-width:400px;}
#fader{display:block; width:95%;}
.nextListing {width:5%;float:right; margin:6% 5% 5% 5%;padding-right:5%;}
.prevListing {width:5%;float:left; margin:7% 5% 5% 5%; }
and the jQuery
<script type="text/javascript">
jQuery (function() {
$('#fader img:not(:first)').hide();
$('#fader img').each(function() {
var img = $(this);
$('<img>').attr('src', $(this).attr('src')).load(function() {
img.css('margin-left', -'0');
});
});
var pause = false;
function fadeNext() {
$('#fader img').first().fadeOut().appendTo($('#fader'));
$('#fader img').first().fadeIn();
}
function fadePrev() {
$('#fader img').first().fadeOut();
$('#fader img').last().prependTo($('#fader')).fadeIn();
}
$('#fader, #next').click(function() {
fadeNext();
});
$('#prev').click(function() {
fadePrev();
});
$('#fader, .button').hover(function() {
pause = true;
},function() {
pause = false;
});
function doRotate() {
if(!pause) {
fadeNext();
}
}
var rotate = setInterval(doRotate, 5000);
});
</script>
Any ideas how I can stop the flickering when images switch?
Solution :
You're currently initiating the fadeIn
and fadeOut
at the same time, causing a brief overlap. You may want to change fadeIn
to a callback instead:
function fadeNext() {
$('#fader img').first().fadeOut(400, function(){
$('#fader img').first().fadeIn();
}).appendTo($('#fader'));
}
function fadePrev() {
$('#fader img').first().fadeOut(400, function(){
$('#fader img').last().prependTo($('#fader')).fadeIn();
});
}
CSS Howto..
Found a way by my own to give multiple colors. but couldn't divided the cell. i am posting it assuming it will help someone else when they need something like...
Absolutely position the circle so it sits above the rest of the DOM. You can add the following to your .logo and it will work (note that you can center...
$(function(){ $('ul li').each(function(){ var text = $(this).html(); $(this).html('<span class="slidein">' + text + '</span>') }); }); ...
Have you tried background-repeat:repeat-x #bgcontainer { margin:0; padding:0; background:url(images/main_bg.gif); background-repeat:repeat-x ;} ...
You can know if the select is focused select:focus {} Most times this indicates it is open, but not always. To know it 100% sure, you need javascript. I hope...
You need to make sure new-bcu-logo.jpg is in the same folder where you css files is, if you use inline style make sure that image is in the same folder...
Supposing you are using bootstrap, just set margin-bottom: 0 for the .navbar. You might want to remove borders as well. See fiddle: https://jsfiddle.net/yyw99nky/...
Custom data-* attributes are officially supported in the current draft of SVG2: RESOLUTION: "We will reserve "data-*" attributes to be used in SVG content. Source: http://www.w3.org/2015/01/15-svg-minutes.html#item03 This means you can...
it looks like you want to create a carousel, if so I think the best solution would be Owl Carousel 2 here. I have a solution for you too http://codepen.io/Nikolaus91/pen/EKwJXw...
Google+ separates its content into 3 columns. Nothing is set to display inline. To replicate this your markup would look something like this: <div id="container"> <section> <article class="posts">Post 1</article> <article...
You could use the "any element" selector *: .k-state-selected td * {color: #ffffff;} This will match only if the td has (at least) one element as child....
The standard practice is to set body class in respective path hooks: Router.map(function() { this.route('someRoute', { path: '/someAddress', onBeforeAction: function() { $('body').addClass('someRouteBodyClass'); this.next(); }, onStop: function() { $('body').removeClass('someRouteBodyClass'); }, ......
You can use the CSS property background-size which is available since CSS3: background-size: 100% 100%; See this StackOverflow thread for IE support....
The short answer: it's likely that you will often pair this with JS, to inject the will-change property when parts of the page are made interactive, to allow the browser...
Use like this: li{ float: none !important; float: left \9 !important;/* \9 is used after left not after important*/ } !important should always be at the end....
Add a border to your li tags #brusters-footer-nav { text-align: center; } ul { list-style: none; } li { display: inline-block; border-right: 1px solid black; padding: 0 5px; } li:last-child{...
The box-shadow property is not yet widely supported, but can be implemented like: img { -webkit-box-shadow: 5px 5px 10px #666; -moz-box-shadow: 5px 5px 10px #666; box-shadow: 5px 5px 10px #666;...
You mean something like this? I used the javascript jQuery library. If you don't know how to use jQuery leave a reply. (For a better effect scroll by clicking the...
Your aim in writing CSS should be the readability and maintainability of your stylesheet. Usually that means writing as few rules as possible, a goal that is helped by using...
You should't use <?php bloginfo('template_url'); ?> in the CSS files. URLs in CSS files are relative to the current CSS file. So, if you have following directory structure theme/ images/...
Here is a working demo: http://jsfiddle.net/rcravens/aqz8q/ Two things I did. A bit of restructuring the ul/li list. There were some elements not in the li. Used 'li:hover > ul' to...
remove url parameters from font file names. try that. @font-face { font-family: 'fontello'; src: url("#{resource[css:font/fontello69db.eot']}?24671060"); src: url("#{resource[css:font/fontello69db.eot']}?24671060#iefix") format('embedded-opentype'), url("#{resource[css:font/fontello69db.woff']}?24671060")...
SASS is still CSS Okay, to make things straight - all you see is still CSS, but it was written in SASS then compiled back to CSS. SASS is like...
You can't do this only with CSS. You'll need Javascript because the selected option of your select is not a sibling of your input-box in the DOM : <select name="mySelect"...
Your markup and css would help greatly. Without it though, you may be able to target a single element only by using: img:first-of-type:last-of-type { /* centering styles */ } Edit:...
If the text should be cutted on the edge of the table cell you have to change the table-layout to fixed and the td needs a hidden overflow. table{table-layout:fixed} table...
You didn't close the .container and #content divs. This might be the issue.
The table sizing algorithm will force all the table cells in a row to take on the same height, no way around that. One way of doing it requires extra...
Your html become invalid because all checkboxes got the same id, and the labels got the same for attribute so only the first checkbox will be checked when you click...
On each <li> in the responsive dropdown menu, there is a text-align:left property on the CSS selector .tc-hover-menu.nav li which is in the CSS file blue.css. Remove the text-align: left;...