I'm doing some tests with the animeJS animation library (www.animejs.com) and I'd like to use it for changing an image for another when the user moves the mouse over some div elements in the page. Also, I'd like to swap the images with a nice fade-out/fade-in effect. You can see an example in this fiddle: https://jsfiddle.net/n5c5rgjo/3/
If you try it, you'll see that it works fine until you move the mouse from one div to the other while the animation is being played. To avoid a flickering effect in this case, I added a 'lock' (animLock variable in the code) to allow only one animation at a time. This creates another problem, because the image is not updated properly.
Could someone show me a better way of dealing with this problem? Thanks!
Ad this CSS
img{
transition: all 0.8s;
}
img:hover{
opacity:0.1;
transition: all 0.8s;
}
Related
I am working on a site and integrated the bootstrap carousel. Everything is working well, except for a one thing that: When I click on next or previous icon, images will jump a little bit and I feel very annoying about it. I tried every solutions which I have searched and applied but it still didn't work.
Can anybody help me with this problem, the url as below:
https://test5.extensionesdepelobaratas.net/hair-blog/
You will see the first carousel which have number from 1 to 8.
Look forward to hearing solutions from everybody.
Thank you very much.
It looks like there are a handful of elements with the class .item which are not properly being transitioned when it comes to it's attributes and the active class ones which are being applied thereafter.
If you add the following CSS to your .carousel-inner .item elements, all of the values will be transitioned properly.
.carousel-inner .item { transition: all 0.5s ease !important; }
Tested this with the existing website and there is no more 'jumpiness' when it comes to the elements sliding in. Instead, they grow rather than jump to the size which the carousel is setting them as.
Everything below is tested in Chrome, on OSX.
Take a look at the main image at this website I'm building: http://www.appsbayou.se
As you can see when you load the page, the image looks like it's "sliding" to it's correct position. I don't want this behaviour.
The code behind this page is from a custom wordpress theme and in this matter I have no say. My only job is to "fix the image so it doesn't do an animation".
In the source code I've found that these lines are the culprit:
$(this).css("width", new_img_width);
$(this).css("max-width", new_img_width);
where $(this) refers to the <img> tag. There is no .animate() here. Then why is a simple changing of width/maxwidth with jQuery doing so with an animation and how can I make those lines instant instead?
remove
img {
transition: width 0.5s ease-in-out 0s,
left 0.7s ease-in-out 0s,
right 0.7s ease-in-out 0s;
}
from
http://www.appsbayou.se/wp-content/themes/customizr/inc/assets/css/orange.min.css?ver=3.1.24
at line 15
If you do an "Inspect Element" on the image, you'll see it is contained in a set of divs that employ a carousel scheme. There are several things you can do. One is to edit the page HTML and get rid of the container divs. That may have some unwanted side effects though with respect to formatting.
Another option may be to iterate up the parent chain of $(this) and start selectively removing classes from containing divs. For example get rid of the center-slides-enabled class and see what happens. Without knowing more about the structure of the carousel (you're using minified Javascript wrappers so it's sort of hard to know what's going on) I can't say exactly what the right class to get rid of is, but with some trial-and-error I think you should be able to figure out pretty rapidly what you need to do.
I've created a plant database, the client wanted a small image of each plant, that grows in size when you hover over it. I found a jQuery that seemed to work from here: https://github.com/jmar/jquery-hoverZoom
The first time a page loads and you hover over the image, the image isn't centered in the grey box (it's shifted down). Any time after the first time you hover over the image, it is centered in the box. I can't figure out why this is only happening the first time you load the page. I have a "test" page which works fine. The thumbnail image of the plant also shifts position on the page after the first time you hover over it.
I don't know much about the jQuery, so if that's causing the problem I'm not sure how to fix it. I suspect there's some conflicting CSS, but can't find it.
NOT WORKING: http://briggs.honeycombsites.com/plants/product-search/ (NOTE: Click on any of the plants here to take you to the plant page where the hover is set up)
TEST PAGE: http://briggs.honeycombsites.com/test/ (works fine the first time)
ALSO - This doesn't seem to work in Chrome, or Safari :( Once you hover over the image the first time, the thumbnail disappears entirely.
You can apply the scale to the elements on roll over following the basic syntax of this:
CSS
.yourClass {
transform: scale(1, 1);
transition: all .5s ease-in-out;
}
.yourClass:hover {
transform: scale(3, 3);
}
If you have the element within a div I believe you will have to apply it similarly to the parent div. Also, for cross browser functionality, be sure to use the vendor prefixes on both the transition and the transform:
-webkit-
-moz-
-o-
-ms-
There seems to be a conflict between your main style.css ul and li styles and the zoom's style. Try placing jquery.hoverZoom.css last, before </head> and see if the placement of the thumb is correct afterwards.
I have searched all over the site, but due to my low knowledge I was unable to find the right words. I am working my website and the script I was using had a previous theme.
I did a lot of changes so far and I am totally satisfied with it.
However there is a effect which I think from jquery whom sometimes brake my design. I want to remove this effect but couldnt find how. The effect is, when your cursor comes on certain links and buttons, they get bigger and kinda zoomed.
Here is the example of it, http://www.uluyemek.com/demo/
If you look on the left sidebar and get your mouse on the "Giriş Yap" which means log in, the image gets bigger, I would really like to delete this since its causing problems on other pages, to me.
Please help me find where the jquery hide itself.
That effect is being handled by CSS3 transforms applied to that button.
Remove the following CSS from the button and it will make the effect stop:
-webkit-transform: scale(1.1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
This is a really weird problem:
I have a circle that keeps rotating indefinitely with CSS rotate transition, to keep it rotating indefinitely I am using jquery to keep changing the rotate value every 30 sec to a bigger value. I found this to be smoother visually than full CSS solutions.
Yet I have noticed that css transition behaves like this:
It stops even if the transition is not finished when window > tab > page > element has another tab active or if the window is minimized.
So jquery goes on, but the transition stop, making the rotation increase in speed. Stopping the jquery function that increase the rotation when the tab is not focused helps, but not solves the problem entirely because in scenarios where the element is "visible" but the tab is not focused (think of the tab opened but another program is active above the browser, or another window of the browser is open maybe in a tile) the transition keeps going but the jquery timer stops, making the circle stop itself eventually.
Why are you using a transition for this?
#yourElement {
animation:spin 10s linear;
-webkit-animation:spin 10s linear;
}
#keyframes spin {
from {transform:none}
to {transform:rotate(360deg)}
}
#-webkit-keyframes spin {
from {-webkit-transform:none}
to {-webkit-transform:rotate(360deg)}
}
This will animate smoothly and flawlessly, even with tab switches.
Perhaps you can use a background task to refresh the CSS. Check out this thread: Execute Background Task In Javascript