动画导航'单击按钮时的页边空白顶部
Animate nav's margin-top when button clicked
我在网站顶部固定了一个Cookie条。单击关闭图标时，条形图会逐渐消失。
由于div的位置，我还将我的.nav元素下移64px。
问题：当我单击Close图标时，我的.nav上的margin-top是否也会逐渐减少为0？以类似的动画速度？我不确定如何实现
这是我的演示：http://jsfiddle.net/ox19egn4/
还有，在用户看到Cookie条通知后，将我的.nav永久设置为margin-top:0px的最佳方法是什么？我应该在CSS中将其设置为0，而在JS中将其临时设置为64px吗？
/**
*
* JQUERY EU COOKIE LAW POPUPS
* version 1.0.0
*
* Code on Github:
* https://github.com/wimagguc/jquery-eu-cookie-law-popup
*
* To see a live demo, go to:
* http://www.wimagguc.com/2015/04/jquery-eu-cookie-law-popup/
*
* by Richard Dancsi
* http://www.wimagguc.com/
*
*/
(function($) {
// for ie9 doesn't support debug console >>>
if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function () { };
// ^^^
var EuCookieLawPopup = (function() {
var _self = this;
///////////////////////////////////////////////////////////////////////////////////////////////
// PARAMETERS (MODIFY THIS PART) //////////////////////////////////////////////////////////////
_self.params = {
cookiePolicyUrl : '/cookie-privacy-policy/',
popupPosition : 'bottom',
colorStyle : 'default',
compactStyle : false,
popupTitle : 'This site uses cookies to store information on your computer',
popupText : '',
buttonContinueTitle : 'Learn more',
buttonLearnmoreTitle : 'Learn more',
buttonLearnmoreOpenInNewWindow : true,
agreementExpiresInDays : 30,
autoAcceptCookiePolicy : true,
htmlMarkup : null
};
///////////////////////////////////////////////////////////////////////////////////////////////
// VARIABLES USED BY THE FUNCTION (DON'T MODIFY THIS PART) ////////////////////////////////////
_self.vars = {
INITIALISED : false,
HTML_MARKUP : null,
COOKIE_NAME : 'EU_COOKIE_LAW_CONSENT'
};
///////////////////////////////////////////////////////////////////////////////////////////////
// PRIVATE FUNCTIONS FOR MANIPULATING DATA ////////////////////////////////////////////////////
// Overwrite default parameters if any of those is present
var parseParameters = function(object, markup, settings) {
if (object) {
var className = $(object).attr('class') ? $(object).attr('class') : '';
if (className.indexOf('eupopup-top') > -1) {
_self.params.popupPosition = 'top';
}
else if (className.indexOf('eupopup-fixedtop') > -1) {
_self.params.popupPosition = 'fixedtop';
}
else if (className.indexOf('eupopup-bottomright') > -1) {
_self.params.popupPosition = 'bottomright';
}
else if (className.indexOf('eupopup-bottomleft') > -1) {
_self.params.popupPosition = 'bottomleft';
}
else if (className.indexOf('eupopup-bottom') > -1) {
_self.params.popupPosition = 'bottom';
}
else if (className.indexOf('eupopup-block') > -1) {
_self.params.popupPosition = 'block';
}
if (className.indexOf('eupopup-color-default') > -1) {
_self.params.colorStyle = 'default';
}
else if (className.indexOf('eupopup-color-inverse') > -1) {
_self.params.colorStyle = 'inverse';
}
if (className.indexOf('eupopup-style-compact') > -1) {
_self.params.compactStyle = true;
}
}
if (markup) {
_self.params.htmlMarkup = markup;
}
if (settings) {
if (typeof settings.cookiePolicyUrl !== 'undefined') {
_self.params.cookiePolicyUrl = settings.cookiePolicyUrl;
}
if (typeof settings.popupPosition !== 'undefined') {
_self.params.popupPosition = settings.popupPosition;
}
if (typeof settings.colorStyle !== 'undefined') {
_self.params.colorStyle = settings.colorStyle;
}
if (typeof settings.popupTitle !== 'undefined') {
_self.params.popupTitle = settings.popupTitle;
}
if (typeof settings.popupText !== 'undefined') {
_self.params.popupText = settings.popupText;
}
if (typeof settings.buttonContinueTitle !== 'undefined') {
_self.params.buttonContinueTitle = settings.buttonContinueTitle;
}
if (typeof settings.buttonLearnmoreTitle !== 'undefined') {
_self.params.buttonLearnmoreTitle = settings.buttonLearnmoreTitle;
}
if (typeof settings.buttonLearnmoreOpenInNewWindow !== 'undefined') {
_self.params.buttonLearnmoreOpenInNewWindow = settings.buttonLearnmoreOpenInNewWindow;
}
if (typeof settings.agreementExpiresInDays !== 'undefined') {
_self.params.agreementExpiresInDays = settings.agreementExpiresInDays;
}
if (typeof settings.autoAcceptCookiePolicy !== 'undefined') {
_self.params.autoAcceptCookiePolicy = settings.autoAcceptCookiePolicy;
}
if (typeof settings.htmlMarkup !== 'undefined') {
_self.params.htmlMarkup = settings.htmlMarkup;
}
}
};
var createHtmlMarkup = function() {
if (_self.params.htmlMarkup) {
return _self.params.htmlMarkup;
}
var html =
'<div class="eupopup-container' +
' eupopup-container-' + _self.params.popupPosition +
(_self.params.compactStyle ? ' eupopup-style-compact' : '') +
' eupopup-color-' + _self.params.colorStyle + '">' +
'<div class="eupopup-head">' + _self.params.popupTitle + '</div>' +
'<div class="eupopup-body">' + _self.params.popupText + '</div>' +
'<div class="eupopup-buttons">' +
'<a href="#" class="eupopup-button eupopup-button_1">' + _self.params.buttonContinueTitle + '</a>' +
'<a href="' + _self.params.cookiePolicyUrl + '"' +
(_self.params.buttonLearnmoreOpenInNewWindow ? ' target=_blank ' : '') +
' class="eupopup-button eupopup-button_2">' + _self.params.buttonLearnmoreTitle + '</a>' +
'<div class="clearfix"></div>' +
'</div>' +
'<a href="#" class="eupopup-closebutton"><img src="/images/icons/svg/close.svg"></a>' +
'</div>';
return html;
};
// Storing the consent in a cookie
var setUserAcceptsCookies = function(consent) {
var d = new Date();
var expiresInDays = _self.params.agreementExpiresInDays * 24 * 60 * 60 * 1000;
d.setTime( d.getTime() + expiresInDays );
var expires = "expires=" + d.toGMTString();
document.cookie = _self.vars.COOKIE_NAME + '=' + consent + "; " + expires + ";path=/";
$(document).trigger("user_cookie_consent_changed", {'consent' : consent});
};
// Let's see if we have a consent cookie already
var userAlreadyAcceptedCookies = function() {
var userAcceptedCookies = false;
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var c = cookies[i].trim();
if (c.indexOf(_self.vars.COOKIE_NAME) == 0) {
userAcceptedCookies = c.substring(_self.vars.COOKIE_NAME.length + 1, c.length);
}
}
return userAcceptedCookies;
};
var hideContainer = function() {
// $('.eupopup-container').slideUp(200);
$('.eupopup-container').animate({
opacity: 0,
height: 0
}, 200, function() {
$('.eupopup-container').hide(0);
});
};
///////////////////////////////////////////////////////////////////////////////////////////////
// PUBLIC FUNCTIONS //////////////////////////////////////////////////////////////////////////
var publicfunc = {
// INITIALIZE EU COOKIE LAW POPUP /////////////////////////////////////////////////////////
init : function(settings) {
parseParameters(
$(".eupopup").first(),
$(".eupopup-markup").html(),
settings);
// No need to display this if user already accepted the policy
if (userAlreadyAcceptedCookies()) {
return;
}
// We should initialise only once
if (_self.vars.INITIALISED) {
return;
}
_self.vars.INITIALISED = true;
// Markup and event listeners >>>
_self.vars.HTML_MARKUP = createHtmlMarkup();
if ($('.eupopup-block').length > 0) {
$('.eupopup-block').append(_self.vars.HTML_MARKUP);
} else {
$('BODY').append(_self.vars.HTML_MARKUP);
}
$('.eupopup-button_1').click(function() {
setUserAcceptsCookies(true);
hideContainer();
return false;
});
$('.eupopup-closebutton').click(function() {
setUserAcceptsCookies(true);
hideContainer();
return false;
});
// ^^^ Markup and event listeners
// Ready to start!
$('.eupopup-container').show();
// In case it's alright to just display the message once
if (_self.params.autoAcceptCookiePolicy) {
setUserAcceptsCookies(true);
}
}
};
return publicfunc;
});
$(document).ready( function() {
if ($(".eupopup").length > 0) {
(new EuCookieLawPopup()).init({
'info' : 'YOU_CAN_ADD_MORE_SETTINGS_HERE',
'popupTitle' : 'This site uses cookies to store information on your computer',
'popupText' : '',
'buttonLearnmoreTitle' : ''
});
}
});
}(jQuery));.eupopup-container {
position: relative;
z-index: 190;
top: 0;
width: 100%;
height: 64px;
background: #4a4a4a;
text-align: center;
padding-top: 5px;
display: block;
}
.nav {
position:fixed;
top:0;
margin-top: 64px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="nav">
<img src="http://placehold.it/1200x300">
</div>
</div>感谢
我当然建议使用css。类似这样的东西：
$('.close').click(function() {
$('.cookie').fadeOut(300, function(){
$('.content').addClass('nocookie');
});
});.cookie {
text-align:center;
background:red;
color:#fff;
position:fixed;
width:100%;
left:0;
top:0;
}
.close {
font-size:80%;
color:inherit;
}
.content {
transform:translateY(20px);
transition:all .3s ease;
}
.content.nocookie {
transform:translateY(0px);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cookie">Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie <a href="#" class="close">close</a></div>
<div class="content">Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum</div>如果我很理解你的问题，在你的函数hideContainer中，你可以添加：
$('.nav').animate({
'margin-top': 0
}, 200);
或者您可以直接设置.nav:的CSS属性
top: 64px
并在javascript代码中设置此属性的动画。
相关文章：
- 如何根据主体高度动态更改元素边距顶部
- 所有4页边距(上、右、下、左）的混合更少
- 网络视图中视频的页边距
- JQuery 使用 var 对边距顶部进行动画处理，不起作用
- jQuery页面过渡使上一页为空白
- 如何根据浏览器高度制作“边距:顶部”
- jQuery设置的边距顶部使内容跳跃.如何使其平滑动画化
- 使用画笔时，d3.js图表的内容溢出页边空白
- 如何在ASP.Net中使用java脚本动态调整页边距
- 向下滚动时减小页眉填充顶部值
- 使用obj.style.marginTop获取页边空白顶部失败，但如果首先显式设置了marginTop，则该操作有效
- 页边空白在[Window][Object]中显示
- 如何减少和增加滚动页边距
- 动画导航'单击按钮时的页边空白顶部
- 使用JavaScript获取页边空白
- Javascript生成的页边空白将放置内容搞砸
- 恼人的不必要的溢出和页边空白顶部/底部没有'不起作用
- Jquery动画位置不适用于页边空白顶部
- 除了IE8/Opera之外，所有浏览器中的页边空白顶部都不同
- jQuery动画img页边空白顶部
