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))
Related
I have written a simple function .onload where a 'p' and 'h1' tag go from opacity:0; to opacity 1;.
The animation is fine and everything but sometimes while the animation is happening, it looks like the p and h1 tags have a background-color set to gray while the animation is happening and then it disappears once the animation ends and this only occurs on firefox.
see animation bug here
const abouth1 = document.querySelector(".about-h1");
const aboutp = document.querySelector(".about-p");
const logo = document.querySelector(".logo");
function fadeFunction() {
abouth1.classList.add("about-show-h1");
aboutp.classList.add("about-show-p");
logo.classList.add("logo-show");
}
window.onload = fadeFunction();
.about-h1 {
opacity: 0;
transition: 1.5s;
transform: translateX(45%);
}
.about-p {
margin-top: 1.25em;
font-size: 1rem;
opacity: 0;
transition: 2s;
transform: translateX(-65%);
}
.about-show-p {
opacity: 1;
transform: translateX(0);
}
.about-show-h1 {
opacity: 1;
transform: translateX(0);
}
<h1 class="about-h1">
My name is Drinos Shala, <br />
and I am a senior software developer who <br />
specializes in front-end technologies.
</h1>
<p class="about-p">
My job is to ensure your website is pixel perfect in every
dimension,
<br />
years of working in this field have granted me the experience needed
<br />
to deploy every website I start in great success! <br />Let's get in
touch so we can get started on your dream website for your dream
business.
</p>
If you have any third party firefox extensions try to remove them, looks fine on my Firefox browser and adding a night-mode extension (even though turned off) caused this bug.
I am trying to use the animate.css library for nuxt page transtions but it doesnt seem to be working. I added the animate.css to the nuxt.config.js and loads in fine. But when try to use one of the transition names, nothing happens.
Tried:
transition: 'bounceInUp'
and also:
transition: {name:'bounceInUp',type:'animation'}
no animations (or errors) on page load by either.
EDIT:
Tried adding in custom active classes. Still nothing.
Full Page Code:
<template>
<v-layout>
<v-flex class="text-center">
<blockquote class="blockquote">
Testing amination page
</blockquote>
</v-flex>
</v-layout>
</template>
<script>
export default {
transition: {name:'bc',type:'animation'}
}
</script>
<style>
.bc-enter-active {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp
}
.bc-leave-active {
-webkit-animation-name: bounceInUp;
animation-name: bounceOutUp
}
</style>
Provided you already have animate.css installed.
nuxt.config.js
css: ['animate.css/animate.compat.css'],
Vue file. Just a minor tweak with what you already have.
<script>
export default {
transition: {name:'bc'}
}
</script>
<style>
.bc-enter-active {
animation: bounceInUp 5s;
}
.bc-leave-active {
animation: bounceOutUp 5s;
}
</style>
This helped me.
You'd need to define -enter-active and -leave-active classes for the same animation name in CSS. Such as:
. bounceInUp-enter-active {
animation: bounceInUp .8s;
}
. bounceInUp-leave-active {
animation: bounceInUp .5s;
}
I was trying to do a page fade in when my app initially loads using appear; however, I am already using a routing css animation that does a fade in and fade out when going from page to page, but it still leaves me with an abrupt display of my page when it initially loads. So far, my attempts to add another transition tag around the routing transition in a outer nested way has failed. It still loads with an abrupt display of page. Any suggestions?
<template>
<div id="app">
<v-app>
<main>
<transition name="appearPageFadeIn" appear><!-- new appear tag -->
<cq-nav-mobile></cq-nav-mobile>
<cq-nav-desktop></cq-nav-desktop>
<transition name="interPageFadeOutIn" mode="out-in">
<router-view></router-view>
</transition>
<cq-footer></cq-footer>
</transition>
</main>
</v-app>
</div>
</template>
<!-- CSS -->
/* appear page animation */
.appearPageFadeIn-appear {
opacity: 0;
}
.appearPageFadeIn-appear-active {
transition: opacity 1s;
}
/* inter page routing animation */
.interPageFadeOutIn-enter {
opacity: 0;
}
.interPageFadeOutIn-enter-active {
transition: opacity 1s;
}
.interPageFadeOutIn-leave {
opacity: 1; //default
}
.interPageFadeOutIn-leave-active {
transition: opacity 1s;
opacity: 0;
}
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);
}
}
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.