Hi iv been trying to do some animations for a project in my web development class. I am trying to create the illusion that a car in moving on a street by having the street and some mountains moving horizontally on an endless loop but I also need the photo to repeat. I found how to do this with {background-position} but I can't get the photo to seamlessly scroll without there being a gap any suggestions?
body {
background-color: rgb(59, 193, 236);
}
#Mountains {
transform: translate(-8px, -400px);
animation: slide 2s linear infinite;
}
#keyframes slide {
from {
transform: translate(-8px, -400px);
}
to {
transform: translate(1109px, -400px);
}
}
<div id="Mountains">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1109" height="1500" viewBox="0 0 2100 1500">
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01 ">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about=""/>
</rdf:RDF>
</x:xmpmeta>
<?xpacket end="w"?></metadata>
<image y="316" width="2100" height="1184" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAACDQAAASgCAMAAAA63XraAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAC+lBMVEVirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAcAAABEFMKVAAAA/HRSTlMADh4tPExba3iIkpmaqrO7x8zZ3d/u3MGj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AAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAyP8H5b63vEwYaTcAAAAASUVORK5CYII="/>
</svg>
</div>
I haven't though of a solution with only one SVG. But if you can wrap two images (not necessarily the same) in a container, it is easy to make a repeating animation using the animation-delay property for the second image.
See the example:
https://jsfiddle.net/kxo7g714/
.mountains {
position: absolute;
top: 0;
left: 0;
transform: translate(-150px, 50px);
animation: slide 4s linear infinite;
}
.mountains.two {
animation-delay: -2s;
}
If you can use only one image, duplicate it's content inside of the image itself. The example uses different colors to illustrate how the paths are essentially the same.
https://jsfiddle.net/crvpenfo/2/
#keyframes slide {
from {
transform: translate(0, 50px);
}
to {
transform: translate( "NegativeHalfWidth" , 50px);
}
}
Related
When I flipped the image, also transform: translate in goes the reverse direction.
How to achieve a mirror image in the current translated position?
img {
transform: translate(50px, 100px);
/* scale:-1; */
}
<img class="draggable" src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__340.png" width=200>
Since image is dragging with a function and updated transform dynamicaly expecting to find different than this solution -> transform: translate(50px, 100px) scale(-1);
You don't really need transform-property anymore, as far as I know, you could just do:
img {
translate: 50px 100px;
scale: -1 1;
}
<img class="draggable" src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__340.png" width=200>
The scale-property takes up to 3 values, corresponding to the 3 axis (x,y,z).
If only 1 value is provided it takes that for both x- and y-axis. That's why you can give it to values, first one for the x-axis, second one for the y-axis.
solved by wrapping scaled element with another div
img {
scale: -1 1;
}
.img-wrapper{
transform: translate(50px, 100px);
}
<div class="img-wrapper draggable">
<img class="" src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__340.png" width=200>
</div>
Having the translate properties calculated separately seems to do the trick
img{
transform: translateX(50px) translateY(100px) scaleX(-1);
}
<img class="draggable" src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__340.png" width=200>
I would like to ask for help with implementing my idea: as soon as image1 finishes its transition, the "anim" animation will start.
What i tried:
I tried make it with "animation-delay" but this is not my option - the point is that "animation-delay" adds a time before execution after a mouse click, I need animation to start immediately after the end of the transition. If it's not clear, I'll put it more simply: when you click and little bit hold many times image1, the transition does not start over, but the "animation-delay" starts over after last mouse click.
.image2{
top:0px;
left:300px;
position: absolute;
}
.image1{
transition: transform 2s;
}
.image1:active{
transform: scale(0.6);
}
.image1:active + .image2{
animation: anim 2s;
}
#keyframes anim {
0% {top:0%;}
100% {top:20%;}
}
<div class="test">
<img class="image1" src="http://www.clker.com/cliparts/2/p/6/C/i/q/run-button-md.png">
<img class="image2" src="https://lh3.googleusercontent.com/gti0MtNnT1rEQOuo9mfPfegw-qRGLI1MS3QqamM243fVcIXWqJHmlwldYpBJAwsd3tkQtIfvBqernahhDjuzSw=s200">
</div>
Thanks for any help!
Assuming a bit of JS is OK, you can sense when the transition of image1 ends and then start the animation of image2. But you also need to sense the end of this animation so you can reset it and next time it will play again (otherwise CSS thinks it's done it and won't replay it).
const test = document.querySelector('.test');
const image1 = document.querySelector('.image1');
const image2 = document.querySelector('.image2');
image1.addEventListener('transitionend', function () {
image2.classList.add('active');
});
image2.addEventListener('animationend', function () {
image2.classList.remove('active');
});
.image2{
top:0px;
left:300px;
position: absolute;
}
.image1{
transition: transform 2s;
}
.image1:active{
transform: scale(0.6);
}
.image2.active{
animation: anim 2s;
}
#keyframes anim {
0% {top:0%;}
100% {top:20%;}
}
<div class="test">
<img class="image1" src="http://www.clker.com/cliparts/2/p/6/C/i/q/run-button-md.png">
<img class="image2" src="https://lh3.googleusercontent.com/gti0MtNnT1rEQOuo9mfPfegw-qRGLI1MS3QqamM243fVcIXWqJHmlwldYpBJAwsd3tkQtIfvBqernahhDjuzSw=s200">
</div>
You can listen for the transitionend event and then add a class that starts the keyframe animation.
CSS
.animationclass {
animation: anim 2s;
}
JS
const img1 = document.querySelector('.image1');
img1.addEventListener('transitionend', () => {
console.log('Transition ended, add keyframe animation')
img1.classList.add("animationclass")
});
So I'm trying to add transitions onto a slideout component, but the translation portion isn't getting picked up for some reason. The duration is clearly happening, but the translation is not.
.enterLeave {
--tw-translate-x: 0px;
transform: translateX(--tw-translate-x) translateY(0) rotate(0) skewX(0)
skewY(0) scaleX(1) scaleY(1);
transition-property: background-color, border-color, color, fill, stroke,
opacity, box-shadow, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 500ms;
}
.translateX0 {
--tw-translate-x: 0px;
}
.translateXFull {
--tw-translate-x: 100%;
}
function Slideover({ children, isOpen, setIsOpen }) {
return (
<Transition
show={isOpen}
enter={"enterLeave"}
enterFrom={"translateXFull"}
enterTo={"translateX0"}
leave={"enterLeave"}
leaveFrom={"translateX0"}
leaveTo={"translateXFull"}
>
<div className={`${"slideoverWrapper"}`}>
<div className={"hfullFlexCol1"}>{children}</div>
</div>
</Transition>
);
}
I can get it working fine for opacity, but when I try to do the transition it breaks down
You are using a CSS Custom Property (variable) but you are not referencing it properly
translateX(--tw-translate-x)
should be
translateX(var(--tw-translate-x))
I have a troublesome task. Image should be hidden and button showed by default. I want to show image and hide button, but when one animation ends, secound should start. transition should peroid 1 second. How to make it?
All code:
https://jsfiddle.net/169vuuk8/
HTML code:
<div class="showSingle" itemprop="1">
<img src="https://img.thegearpage.net/board/data/avatars/m/47/47608.jpg?1487188345" alt="logo">
<button class="button">button </button>
</div>
Looks like you just need transition-delay css property for second animation: https://developer.mozilla.org/en/docs/Web/CSS/transition-delay
You can either use transitionend event in js, but it is not really needed here: https://developer.mozilla.org/en/docs/Web/Events/transitionend
Not sure what you need exactly but below the image fades in the first second and the button out after 2 seconds delay.
.showSingle img {
opacity: 0;
animation: fadeInImage 1s ease-out forwards;
}
.showSingle button {
opacity: 1;
animation: fadeOutButton 1s ease-out 2s forwards;}
#keyframes fadeInImage {
to {
opacity: 1
}
}
#keyframes fadeOutButton {
to {
opacity: 0
}
}
<div class="showSingle" itemprop="1">
<img src="https://img.thegearpage.net/board/data/avatars/m/47/47608.jpg?1487188345" alt="logo">
<button class="button">button </button>
</div>
First of all, have a look at my div.
<div data-category="news" class="element news isotope-item loadimg" style="position: absolute; opacity: 1; -moz-transform: scale(1); left: 20px; top: 20px; height: auto; overflow: visible; width: auto; background-color: rgb(0, 0, 0);">
<div id="1" class="load_cont"></div>
<p class="number">1</p>
<div class="element_content">
<div class="thumb">
<img src="assets/website/news2.jpg" id="myImage">
<img style="display: none;" src="assets/ajax-loader.gif" id="prg1">
<div class="date_entry"> 14 may 2011</div>
<div class="title news">TEST 1</div>
</div>
</div>
</div>
When I hover over the div, the img, inside thumb, is supposed to disappear and reveal the div's background.
.element_content .thumb:hover img {
opacity:.0; /*FF/OPERA/Chrome*/
filter: alpha(opacity=0); /*IE 5-7*/
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
transition-duration: 0.1s;
}
Now comes the jquery part, which is basically, if I click on the div, it would load-in content via ajax.The thing is, the ajax preloader and css changes work pretty well in Firefox but doesn't show up at all in IE and Chrome, unless I remove the ajax part.
$('#container').find('.element').click(function(){
if($(this).hasClass('large')){
return ;
}
var url="item_detail.php?";
var code=$(this).children().first().attr("id");
//the portion below this point works well in FF but not in IE or Chrome
$("#"+code).append("<img style='background-color:transparent;' src='assets/ajax-loader.gif'>");
$("#"+code).css({
"position":"absolute",
"top":""+(($("#"+code).parent().height()/2)-27)+"px",
"left":""+(($("#"+code).parent().width()/2)-27)+"px",
"z-index":"2",
});
var e_code = $("#"+code);
var e_cont = $('.element_content',this);
e_cont.css({"opacity":"0.3","filter":"alpha(opacity = 30)","zoom":"1"});
e_cont.find('.thumb img').css({"opacity":"1","filter":"alpha(opacity = 100)","zoom":"1"});
var url="item_detail.php?code="+code;
//If I turn off everything below this point, the preloader appears correctly in chrome and IE, otherwise it seems, the css changes above and the preloader thing don't have any effect in browsers other than firefox.
var httpRequest = new XMLHttpRequest();
httpRequest.open('POST', url, false);
httpRequest.send(); // this blocks as request is synchronous
if (httpRequest.status == 200) {
e_code.css({
"position":"static"
});
e_cont.html('');
e_cont.css({"opacity":"1","filter":"alpha(opacity = 100)","zoom":"1"});
$previousLargeItem.html(oldhtml);
$previousLargeItem.css({'height':'auto','width':'auto'});
var res=httpRequest.responseText;
$('#'+code).html(res);
}
});
The actual problem turned out to be the asynch false thing which froze chrome but for some reason continued to run code in firefox. I solved it by using asynch true and moving the later code in a success event call.
I don't know what You exactly want to do.
But try this code, maybe it can help You out:
http://jsbin.com/iserac/11
The transition works. Just make the interval bigger.
.element_content .thumb img {
opacity:1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.element_content .thumb:hover img {
opacity:0; /*FF/OPERA/Chrome*/
filter: alpha(opacity=0); /*IE 5-7*/
}
Try using jQuery ajax api for ajax calls.