How to Stop Slider arrows and Pagination Animation

This topic has 8 replies, 3 voices, and was last updated 10 years, 11 months ago by Eric.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
May 24, 2013 at 12:51 am #4831
stinkykong
Customer
http://dentonbanter.com/sandbox/

The next/previous arrows and pagination bullets have a slide up/down animation on hover. Can I change that to a fade? I haven’t experienced this on other themes and wonder if the setting is theme based or in conjunction with the plugin CSS. Can’t find a rule to change the nature of the hover response.
May 24, 2013 at 12:44 pm #4838
Eric
Customer
That’s actually the plugin causing it to hover like that. You would have to override it with some css of your own.

Here is the code in the plugin’s css that is causing it to hover in that way – `
.flex-direction-nav li .next:hover {
background-position: -52px -50px !important;
}

.flex-direction-nav li .prev:hover {
background-position: 0 -50px !important;
}`

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
May 24, 2013 at 9:28 pm #4849
stinkykong
Customer
Same rules used with Ally, Legacy, and Optimal themes behave differently. Those you point out don’t govern animation.

Is there some javascript with Epik that might be bleeding over and causing the bouncing ball effect?

I can add CSS to adjust this but I’m not fond of the bouncing balls and having to engineer a way to imitate what is present in your other themes.

<h2>I would really appreciate a way to turn this off. </h2>
May 25, 2013 at 12:00 pm #4855
Eric
Customer
No there isn’t any javascript or anything inside Epik that would affect it. It’s actually the plugins css that is causing it to do that. I’ve seen it happen on other Genesis themes as well (I’m guessing that’s how they wanted it to look by default).

Since it’s the plugin itself causing the issue, you would need to adjust the code above by overriding it with your own css. There are other places in the plugin’s css file that you can take a look at to see how its setup, but the important parts are the “prev” “next” and “hover”

I used the code above and it worked fine for me. You may need to add !important to override the plugins css.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
May 25, 2013 at 10:47 pm #4865
stinkykong
Customer
I don’t think it’s fair to say it’s “the plugin”. This will occur anytime an element uses a single sprite image and positioning on hover. So it’s really a combination of the broadly applied rule in Epik’s style.css line 149:

a,
a:visited,
button,
input[type=”button”],
input[type=”submit”],
.btn {
-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}

I found that this rule applied to the slider’s elements works to mitigate the motion:

.flex-direction-nav li a, .flex-control-nav li a {
-moz-transition: 0s;
-webkit-transition: 0s;
transition: 0s;
}

This allows for the slider’s intended hover states.
May 26, 2013 at 12:06 pm #4875
scooby
Customer
That code is present in nearly all of the new StudioPress themes. If you take a look at the Genesis Sample theme’s css you will see it there as well. Wes designs all of his themes on top of the sample theme as a base (which is why you see it there). So if you remove that part that could also work as well…..although most people want this feature inside the css.

I actually prefer to keep it there and manually apply the code as @Eric mentioned above.

Either way should work.
May 26, 2013 at 12:47 pm #4876
Eric
Customer
Since it appears you still haven’t got it, you can just add this to your css and it should also work –
```
.flex-direction-nav li .prev,
.flex-direction-nav li .next {
	-moz-transition: none !important;
	-o-transition: none !important;
	-webkit-transition: none !important;
	transition: none !important;
}
```
As @scooby mentioned, the transition code is featured in all of the latest StudioPress themes, as well as the Genesis Sample theme. Users like this feature because of its cool delayed hover effect….so if you want to keep that feature, I’d leave it in rather than remove it from the theme, and then apply either the code right above, or the code I mentioned in my previous comment in order to fix it.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
May 26, 2013 at 5:21 pm #4883
stinkykong
Customer
My code above appears to work, at least in the browsers I have on hand which doesn’t include any versions of IE.

Using “none” as you mention or “0s” as I mention both produce the same results. My version doesn’t single out the Next/Prev buttons, so it also removes the effect from the navigation bullets. All this is while transitions for image, button, and link hovers stay in effect.
May 26, 2013 at 10:45 pm #4884
Eric
Customer
Great, glad its working!

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘How to Stop Slider arrows and Pagination Animation’ is closed to new replies.