Apply div CSS before an animation starts instead of when it ends
up vote
0
down vote
favorite
In this plunk I have a jQuery UI animation (slideDown) that displays a div. The div also has a margin-top:100px attribute to show it 100px below the top margin.
The problem is that when the animation starts, it disregards the margin, and it is only applied after the animation ends. I need the margin applied at the beginning of the animation. How to accomplish this?
HTML
<body style="background-color:blue">
<div id="div1" style="background-color:orange;width:180px;height:40px;margin-top:100px"></div>
</body>
Javascript
$(function() {
var div1 = $('#div1');
div1.hide();
setTimeout(function(){
div1.slideDown();
}, 1000);
})
jquery jquery-ui
asked Nov 15 at 17:50
ps0604
609844122
add a comment |
up vote
0
down vote
favorite
In this plunk I have a jQuery UI animation (slideDown) that displays a div. The div also has a margin-top:100px attribute to show it 100px below the top margin.
The problem is that when the animation starts, it disregards the margin, and it is only applied after the animation ends. I need the margin applied at the beginning of the animation. How to accomplish this?
HTML
<body style="background-color:blue">
<div id="div1" style="background-color:orange;width:180px;height:40px;margin-top:100px"></div>
</body>
Javascript
$(function() {
var div1 = $('#div1');
div1.hide();
setTimeout(function(){
div1.slideDown();
}, 1000);
})
jquery jquery-ui
asked Nov 15 at 17:50
ps0604
609844122
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
In this plunk I have a jQuery UI animation (slideDown) that displays a div. The div also has a margin-top:100px attribute to show it 100px below the top margin.
The problem is that when the animation starts, it disregards the margin, and it is only applied after the animation ends. I need the margin applied at the beginning of the animation. How to accomplish this?
HTML
<body style="background-color:blue">
<div id="div1" style="background-color:orange;width:180px;height:40px;margin-top:100px"></div>
</body>
Javascript
$(function() {
var div1 = $('#div1');
div1.hide();
setTimeout(function(){
div1.slideDown();
}, 1000);
})
jquery jquery-ui
asked Nov 15 at 17:50
ps0604
609844122
In this plunk I have a jQuery UI animation (slideDown) that displays a div. The div also has a margin-top:100px attribute to show it 100px below the top margin.
The problem is that when the animation starts, it disregards the margin, and it is only applied after the animation ends. I need the margin applied at the beginning of the animation. How to accomplish this?
HTML
<body style="background-color:blue">
<div id="div1" style="background-color:orange;width:180px;height:40px;margin-top:100px"></div>
</body>
Javascript
$(function() {
var div1 = $('#div1');
div1.hide();
setTimeout(function(){
div1.slideDown();
}, 1000);
})
jquery jquery-ui
jquery jquery-ui
asked Nov 15 at 17:50
ps0604
609844122
asked Nov 15 at 17:50
ps0604
609844122
asked Nov 15 at 17:50
ps0604
609844122
asked Nov 15 at 17:50
ps0604
609844122
asked Nov 15 at 17:50
ps0604
609844122
609844122
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
accepted
The slideDown animation is starting from 0 and sliding the item down into it's final position.
If you want to it to slideDown from 100px from the top, add a wrapper.
HTML
<div class="wrapper">
<div id="div1" style="background-color:orange;width:180px;height:40px;"></div>
</div>
CSS
.wrapper {
margin-top: 100px;
}
Now the animation will start at 100px from the top and slideDown just the div element.
http://plnkr.co/edit/yqYTonJEBuggTU4OsQ6o?p=preview
Side note, I see you have a DIV with ID 'div1' but in your CSS, you have a class definition for 'div1'. ID Selector is # where class selector is .. So you may consider changing it to #div1 {} in your CSS if you need.
Hope that helps.
answered Nov 15 at 18:40
Twisty
12.7k11433
add a comment |
up vote
1
down vote
HTML
<body style="background-color:blue">
<div id="div1" class="div1"></div>
</body>
JAVASCRIPT
$(function() {
var div1 = $('#div1');
var b = div1.position();
div1.hide();
setTimeout(function(){
div1.slideDown({top: "+" + b.top});
}, 1000);
})
CSS
.div1 { width: 160px; height: 40px; position:absolute; border:1px solid black; background-color: orange; top: 50px; }
Please see my forked version of your Plunker.
Position and then Animation
answered Nov 15 at 18:31
Ryan
8532710
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53325265%2fapply-div-css-before-an-animation-starts-instead-of-when-it-ends%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
The slideDown animation is starting from 0 and sliding the item down into it's final position.
If you want to it to slideDown from 100px from the top, add a wrapper.
HTML
<div class="wrapper">
<div id="div1" style="background-color:orange;width:180px;height:40px;"></div>
</div>
CSS
.wrapper {
margin-top: 100px;
}
Now the animation will start at 100px from the top and slideDown just the div element.
http://plnkr.co/edit/yqYTonJEBuggTU4OsQ6o?p=preview
Side note, I see you have a DIV with ID 'div1' but in your CSS, you have a class definition for 'div1'. ID Selector is # where class selector is .. So you may consider changing it to #div1 {} in your CSS if you need.
Hope that helps.
answered Nov 15 at 18:40
Twisty
12.7k11433
add a comment |
up vote
1
down vote
accepted
The slideDown animation is starting from 0 and sliding the item down into it's final position.
If you want to it to slideDown from 100px from the top, add a wrapper.
HTML
<div class="wrapper">
<div id="div1" style="background-color:orange;width:180px;height:40px;"></div>
</div>
CSS
.wrapper {
margin-top: 100px;
}
Now the animation will start at 100px from the top and slideDown just the div element.
http://plnkr.co/edit/yqYTonJEBuggTU4OsQ6o?p=preview
Side note, I see you have a DIV with ID 'div1' but in your CSS, you have a class definition for 'div1'. ID Selector is # where class selector is .. So you may consider changing it to #div1 {} in your CSS if you need.
Hope that helps.
answered Nov 15 at 18:40
Twisty
12.7k11433
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
The slideDown animation is starting from 0 and sliding the item down into it's final position.
If you want to it to slideDown from 100px from the top, add a wrapper.
HTML
<div class="wrapper">
<div id="div1" style="background-color:orange;width:180px;height:40px;"></div>
</div>
CSS
.wrapper {
margin-top: 100px;
}
Now the animation will start at 100px from the top and slideDown just the div element.
http://plnkr.co/edit/yqYTonJEBuggTU4OsQ6o?p=preview
Side note, I see you have a DIV with ID 'div1' but in your CSS, you have a class definition for 'div1'. ID Selector is # where class selector is .. So you may consider changing it to #div1 {} in your CSS if you need.
Hope that helps.
answered Nov 15 at 18:40
Twisty
12.7k11433
The slideDown animation is starting from 0 and sliding the item down into it's final position.
If you want to it to slideDown from 100px from the top, add a wrapper.
HTML
<div class="wrapper">
<div id="div1" style="background-color:orange;width:180px;height:40px;"></div>
</div>
CSS
.wrapper {
margin-top: 100px;
}
Now the animation will start at 100px from the top and slideDown just the div element.
http://plnkr.co/edit/yqYTonJEBuggTU4OsQ6o?p=preview
Side note, I see you have a DIV with ID 'div1' but in your CSS, you have a class definition for 'div1'. ID Selector is # where class selector is .. So you may consider changing it to #div1 {} in your CSS if you need.
Hope that helps.
answered Nov 15 at 18:40
Twisty
12.7k11433
answered Nov 15 at 18:40
Twisty
12.7k11433
answered Nov 15 at 18:40
Twisty
12.7k11433
answered Nov 15 at 18:40
Twisty
12.7k11433
12.7k11433
add a comment |
add a comment |
up vote
1
down vote
HTML
<body style="background-color:blue">
<div id="div1" class="div1"></div>
</body>
JAVASCRIPT
$(function() {
var div1 = $('#div1');
var b = div1.position();
div1.hide();
setTimeout(function(){
div1.slideDown({top: "+" + b.top});
}, 1000);
})
CSS
.div1 { width: 160px; height: 40px; position:absolute; border:1px solid black; background-color: orange; top: 50px; }
Please see my forked version of your Plunker.
Position and then Animation
answered Nov 15 at 18:31
Ryan
8532710
add a comment |
up vote
1
down vote
HTML
<body style="background-color:blue">
<div id="div1" class="div1"></div>
</body>
JAVASCRIPT
$(function() {
var div1 = $('#div1');
var b = div1.position();
div1.hide();
setTimeout(function(){
div1.slideDown({top: "+" + b.top});
}, 1000);
})
CSS
.div1 { width: 160px; height: 40px; position:absolute; border:1px solid black; background-color: orange; top: 50px; }
Please see my forked version of your Plunker.
Position and then Animation
answered Nov 15 at 18:31
Ryan
8532710
add a comment |
up vote
1
down vote
up vote
1
down vote
HTML
<body style="background-color:blue">
<div id="div1" class="div1"></div>
</body>
JAVASCRIPT
$(function() {
var div1 = $('#div1');
var b = div1.position();
div1.hide();
setTimeout(function(){
div1.slideDown({top: "+" + b.top});
}, 1000);
})
CSS
.div1 { width: 160px; height: 40px; position:absolute; border:1px solid black; background-color: orange; top: 50px; }
Please see my forked version of your Plunker.
Position and then Animation
answered Nov 15 at 18:31
Ryan
8532710
HTML
<body style="background-color:blue">
<div id="div1" class="div1"></div>
</body>
JAVASCRIPT
$(function() {
var div1 = $('#div1');
var b = div1.position();
div1.hide();
setTimeout(function(){
div1.slideDown({top: "+" + b.top});
}, 1000);
})
CSS
.div1 { width: 160px; height: 40px; position:absolute; border:1px solid black; background-color: orange; top: 50px; }
Please see my forked version of your Plunker.
Position and then Animation
answered Nov 15 at 18:31
Ryan
8532710
answered Nov 15 at 18:31
Ryan
8532710
answered Nov 15 at 18:31
Ryan
8532710
answered Nov 15 at 18:31
Ryan
8532710
8532710
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53325265%2fapply-div-css-before-an-animation-starts-instead-of-when-it-ends%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
