This question already has answers here:
Modify css style for pseudo element :after content with Jquery [duplicate]
(3 answers)
Closed 9 years ago.
I am trying to change the 'top' attribute of :after in an element.
CSS:
.mymessage:after
{
top:20px;
}
How can I animate it to say, 40px?
Pseudoelements aren't part of the DOM, so in principle they are inaccessible with Javascript. The best you can do is add a stylesheet to your page that adds a new rule for the pseudoelement.
You could get jquery to add a class to the element $('.mymessage').addClass('active') then create styles for that and set css animations
.mymessage:after
{
top:20px;
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-ms-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear;
}
.mymessage.active:after
{
top:40px;
}
Related
How to implement animated list to grid transition in HTML, using Twitter Bootstrap? So when you toggle between list and grid it looks like this:
You could use CSS transition like this. You'd need to tweak the animation.
.row div {
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
http://www.codeply.com/go/7GHR01JOez
div.style.marginLeft="-200px";
On click of a button above statement executes but it just changes the margin instantly, but I want that it moves while changing the margin.
So I need a JavaScript solution for that.
Actually you can probably solve this with CSS. If you have the margins changing already, try applying a CSS transition to the element.
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
In this case the "all" is a reference to the property you want to apply the transition to. You could probably use margin-left, but all will cover pretty much all available transition properties.
Here's more info: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
This question already has answers here:
Animate background image change with jQuery
(9 answers)
Closed 8 years ago.
My HEADER element has a background image and I need to swap it to another image after a 3 second delay, I have looked all over the internet and I cannot find a solution! I have tried CSS3 and Jquery and I just cant get it to work.
Because of the way the website is built, it has to be the background image of the element that changes and not a nested Div within the HEADER element.
--- SOLVED / SOLUTION ---
JS
$(document).ready(function() {
$("header").delay(5000).queue(function() {
$(this).css({
"background-image": "url(<?php bloginfo('template_url') ?>/img/header-boy-hover.jpg)"
});
});
});
CSS
header {
-webkit-transition:all 1s ease-in;
-moz-transition:all 1s ease-in;
-o-transition:all 1s ease-in;
-ms-transition:all 1s ease-in;
transition:all 1s ease-in;
}
A similar question has been asked before - This should give you an answer
Change CSS background-image with different intervals via jQuery
I have a working fade in/fade out jQuery example here:
http://jsfiddle.net/mcgarriers/NJe63/6/
However, I'm wondering if it is possible to replace the background-color red effect with a background image?
Many thanks for any pointers
How about trying something like this?
I altered the code from your jsfiddle link.
$('.box').mouseenter(function(){
$(this).stop().animate({opacity: 0}, 0).css('background', 'url(http://static.tvtropes.org/pmwiki/pub/images/Hello_Kitty_Pink_2981.jpg)').animate({ opacity: 1 }, 1000);
}).mouseleave(function(){
$(this).stop().animate({opacity: 1}, 0).css('background', 'white');
});
You could do this with CSS3. You could create a div tag to the size of your choice around the image then use a basic CSS3 transition.
#yourdiv a {
background-color: #FFF;
}
#yourdiv a:hover {
background-color: #000;
-webkit-transition: background-color 600ms linear;
-moz-transition: background-color 600ms linear;
-o-transition: background-color 600ms linear;
-ms-transition: background-color 600ms linear;
transition: background-color 600ms linear;
}
Or you can have a image fade into another with CSS3:
http://css3.bradshawenterprises.com/cfimg1/
You cannot fadein/fadeout background-image of a HTML element, but you can with background-color.
Would it possibly be your solution? Fade background image in and out with jQuery?
I am learning Web Design by myself and now I've started playing with twitter bootstrap's modal JavaScript plugin.
I've created a new modal class named modal-login, it's a login form inside a modal window. Things have been working good, but the fade effect/slide down does not work. The effect that bring down the modal box from top to center.
I don't have yet deep understanding of javascript and jQuery.
My question now is, can we edit the bootstrap-modal.js file, so that I may include my new modal class named modal-login and modal-register? so that it could take advantage of the modal fade in effect?
You shouldn't need to edit the bootstrap-modal.js file. You just need to add the fade class to your modals, and then add some CSS rules.
For example:
.modal-login.fade {
top: -25%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-ms-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out;
}
.modal-login.fade.in {
top: 50%;
}
Even better would be if you still kept the plain modal class on your new one's, and just used your new classes to do overrides. That way you could inherit the CSS above, without having to duplicate it.