Skip to main content

Bug Tracker

Side navigation

#8526 closed bug (invalid)

Opened March 14, 2011 09:23PM UTC

Closed March 25, 2011 05:56PM UTC

Last modified March 14, 2012 07:13PM UTC

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:
Blocked by: Blocking:
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();

});

Attachments (0)
Change History (3)

Changed March 14, 2011 09:31PM UTC by lathan comment:1

Changed March 15, 2011 01:28PM UTC by dmethvin comment:2

owner: → dekiss
status: newpending

Why are you trying to animate the src property? It is not numeric.

Changed March 25, 2011 05:56PM UTC by addyosmani comment:3

resolution: → invalid
status: pendingclosed

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.