Ticket #8526 (closed bug: invalid)
Google Chrome browser will not animate this right, problem is when it should change image source, that never happens it is keeping the same source and it is showing just the first picture
| Reported by: | dekiss | Owned by: | dekiss |
|---|---|---|---|
| Priority: | undecided | Milestone: | 1.next |
| Component: | unfiled | Version: | 1.5.1 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
This is html
<html> <head> </head> <body>
<div id="desno">
<div id="topV" >
<img src=" http://www.harvardfilmarchive.org/images/vw_car_drive.jpg" alt="img3" width="150px" height="100px" id="imgV"/>
</div> <div id="slikaNaDen"> </div> <div id="servisi"> </div>
</div>
</body> </html>
This is CSS
#desno {
position:absolute; left:0px; top:0px; width:190px; height:1000px; border:1px black solid; }
#topV img {
position:absolute; border:1px black solid; left:20px; top:10px; }
#topV {
text-align"center; position:absolute; left:0px; top:0px; width:190px; height:148px; border:1px black solid; }
#slikaNaDen {
position:absolute; left:0px; top:148px; width:190px; height:140px; border:1px black solid; }width:141px; height:72px; border:px black solid; position:absolute;
#servisi {
position:absolute; left:0px; top:288px; width:190px; height:800px; border:1px black solid; }
This is Jquery
img[0]=" http://www.harvardfilmarchive.org/images/vw_car_drive.jpg";
img[1]=" http://www.treehugger.com/byd-e6-electric-car-002.jpg";
var x=0;
$("#topV").click(function() {
var slide; slide = function() {
x++;
$("#imgV").animate({ opacity : "0.4" }, 6000, function() {}); $("#imgV").animate({ opacity : "0.0" }, 3000, function() {});
alert(img[x]); $("#imgV").animate({ src : img[x], opacity : 0 },1, function() {}); $("#imgV").animate({ opacity : "0.5" }, 3000, function() {}); $("#imgV").animate({ opacity : "1" }, 6000, function() { });
if (x==1) {
x-=2;
setTimeout(slide, 20000);
}
};
slide();
});
Change History
comment:2 Changed 2 years ago by dmethvin
- Owner set to dekiss
- Status changed from new to pending
Why are you trying to animate the src property? It is not numeric.
comment:3 Changed 2 years ago by addyosmani
- Status changed from pending to closed
- Resolution set to invalid
You cannot animate the image's src attribute in the way that you are attempting to - as dmethvin correctly points out, it's non-numeric thus why nothing happens. If what you're trying to achieve is an image swap or fade over time, try fading out the original image in the container, swapping the src at that point and then fading back in. Alternatively, play around with animating the opacity if you prefer to have tighter control over that aspect of the animation process.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
Fiddle example: http://jsfiddle.net/lathan/JqV3W/