1. 首頁
  2. 問答
  3. 當點擊按鈕時動畫導航欄的頁邊距

當點擊按鈕時動畫導航欄的頁邊距

2015-12-07 134 views
1

我在我的網站頂部固定了一個Cookie欄。 當關閉圖標被點擊時，欄會消失。當點擊按鈕時動畫導航欄的頁邊距

由於div的位置，我也迫使我的.nav元素下降64px。

問：是否有可能，當我點擊Close圖標我.nav的margin-top逐漸減小到0嗎？有着類似的動畫速度？我不能確定如何實現這一目標

這裏是我的演示：http://jsfiddle.net/ox19egn4/

此外，怎樣設置我的.nav到margin-top:0px用戶已經看到了餅乾條通知後永久的最好方法？ 我應該在我的CSS中將其設置爲0，但在JS中暫時設置爲64px？

/** 
 
* \t 
 
* 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() { 
 

 
\t var _self = this; 
 

 
\t /////////////////////////////////////////////////////////////////////////////////////////////// 
 
\t // PARAMETERS (MODIFY THIS PART) ////////////////////////////////////////////////////////////// 
 
\t _self.params = { 
 
\t \t cookiePolicyUrl : '/cookie-privacy-policy/', 
 
\t \t popupPosition : 'bottom', 
 
\t \t colorStyle : 'default', 
 
\t \t compactStyle : false, 
 
\t \t popupTitle : 'This site uses cookies to store information on your computer', 
 
\t \t popupText : '', 
 
\t \t buttonContinueTitle : 'Learn more', 
 
\t \t buttonLearnmoreTitle : 'Learn more', 
 
\t \t buttonLearnmoreOpenInNewWindow : true, 
 
\t \t agreementExpiresInDays : 30, 
 
\t \t autoAcceptCookiePolicy : true, 
 
\t \t htmlMarkup : null 
 
\t }; 
 

 
\t /////////////////////////////////////////////////////////////////////////////////////////////// 
 
\t // VARIABLES USED BY THE FUNCTION (DON'T MODIFY THIS PART) //////////////////////////////////// 
 
\t _self.vars = { 
 
\t \t INITIALISED : false, 
 
\t \t HTML_MARKUP : null, 
 
\t \t COOKIE_NAME : 'EU_COOKIE_LAW_CONSENT' 
 
\t }; 
 

 
\t /////////////////////////////////////////////////////////////////////////////////////////////// 
 
\t // PRIVATE FUNCTIONS FOR MANIPULATING DATA //////////////////////////////////////////////////// 
 

 
\t // Overwrite default parameters if any of those is present 
 
\t var parseParameters = function(object, markup, settings) { 
 

 
\t \t if (object) { 
 
\t \t \t var className = $(object).attr('class') ? $(object).attr('class') : ''; 
 
\t \t \t if (className.indexOf('eupopup-top') > -1) { 
 
\t \t \t \t _self.params.popupPosition = 'top'; 
 
\t \t \t } 
 
\t \t \t else if (className.indexOf('eupopup-fixedtop') > -1) { 
 
\t \t \t \t _self.params.popupPosition = 'fixedtop'; 
 
\t \t \t } 
 
\t \t \t else if (className.indexOf('eupopup-bottomright') > -1) { 
 
\t \t \t \t _self.params.popupPosition = 'bottomright'; 
 
\t \t \t } 
 
\t \t \t else if (className.indexOf('eupopup-bottomleft') > -1) { 
 
\t \t \t \t _self.params.popupPosition = 'bottomleft'; 
 
\t \t \t } 
 
\t \t \t else if (className.indexOf('eupopup-bottom') > -1) { 
 
\t \t \t \t _self.params.popupPosition = 'bottom'; 
 
\t \t \t } 
 
\t \t \t else if (className.indexOf('eupopup-block') > -1) { 
 
\t \t \t \t _self.params.popupPosition = 'block'; 
 
\t \t \t } 
 
\t \t \t if (className.indexOf('eupopup-color-default') > -1) { 
 
\t \t \t \t _self.params.colorStyle = 'default'; 
 
\t \t \t } 
 
\t \t \t else if (className.indexOf('eupopup-color-inverse') > -1) { 
 
\t \t \t \t _self.params.colorStyle = 'inverse'; 
 
\t \t \t } 
 
\t \t \t if (className.indexOf('eupopup-style-compact') > -1) { 
 
\t \t \t \t _self.params.compactStyle = true; 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t if (markup) { 
 
\t \t \t _self.params.htmlMarkup = markup; 
 
\t \t } 
 

 
\t \t if (settings) { 
 
\t \t \t if (typeof settings.cookiePolicyUrl !== 'undefined') { 
 
\t \t \t \t _self.params.cookiePolicyUrl = settings.cookiePolicyUrl; 
 
\t \t \t } 
 
\t \t \t if (typeof settings.popupPosition !== 'undefined') { 
 
\t \t \t \t _self.params.popupPosition = settings.popupPosition; 
 
\t \t \t } 
 
\t \t \t if (typeof settings.colorStyle !== 'undefined') { 
 
\t \t \t \t _self.params.colorStyle = settings.colorStyle; 
 
\t \t \t } 
 
\t \t \t if (typeof settings.popupTitle !== 'undefined') { 
 
\t \t \t \t _self.params.popupTitle = settings.popupTitle; 
 
\t \t \t } 
 
\t \t \t if (typeof settings.popupText !== 'undefined') { 
 
\t \t \t \t _self.params.popupText = settings.popupText; 
 
\t \t \t } 
 
\t \t \t if (typeof settings.buttonContinueTitle !== 'undefined') { 
 
\t \t \t \t _self.params.buttonContinueTitle = settings.buttonContinueTitle; 
 
\t \t \t } 
 
\t \t \t if (typeof settings.buttonLearnmoreTitle !== 'undefined') { 
 
\t \t \t \t _self.params.buttonLearnmoreTitle = settings.buttonLearnmoreTitle; 
 
\t \t \t } 
 
\t \t \t if (typeof settings.buttonLearnmoreOpenInNewWindow !== 'undefined') { 
 
\t \t \t \t _self.params.buttonLearnmoreOpenInNewWindow = settings.buttonLearnmoreOpenInNewWindow; 
 
\t \t \t } 
 
\t \t \t if (typeof settings.agreementExpiresInDays !== 'undefined') { 
 
\t \t \t \t _self.params.agreementExpiresInDays = settings.agreementExpiresInDays; 
 
\t \t \t } 
 
\t \t \t if (typeof settings.autoAcceptCookiePolicy !== 'undefined') { 
 
\t \t \t \t _self.params.autoAcceptCookiePolicy = settings.autoAcceptCookiePolicy; 
 
\t \t \t } 
 
\t \t \t if (typeof settings.htmlMarkup !== 'undefined') { 
 
\t \t \t \t _self.params.htmlMarkup = settings.htmlMarkup; 
 
\t \t \t } 
 
\t \t } 
 

 
\t }; 
 

 
\t var createHtmlMarkup = function() { 
 

 
\t \t if (_self.params.htmlMarkup) { 
 
\t \t \t return _self.params.htmlMarkup; 
 
\t \t } 
 

 
\t \t var html = 
 
\t \t \t '<div class="eupopup-container' + 
 
\t \t \t  ' eupopup-container-' + _self.params.popupPosition + 
 
\t \t \t  (_self.params.compactStyle ? ' eupopup-style-compact' : '') + 
 
\t \t \t \t ' eupopup-color-' + _self.params.colorStyle + '">' + 
 
\t \t \t \t '<div class="eupopup-head">' + _self.params.popupTitle + '</div>' + 
 
\t \t \t \t '<div class="eupopup-body">' + _self.params.popupText + '</div>' + 
 
\t \t \t \t '<div class="eupopup-buttons">' + 
 
\t \t \t \t '<a href="#" class="eupopup-button eupopup-button_1">' + _self.params.buttonContinueTitle + '</a>' + 
 
\t \t \t \t '<a href="' + _self.params.cookiePolicyUrl + '"' + 
 
\t \t \t \t \t (_self.params.buttonLearnmoreOpenInNewWindow ? ' target=_blank ' : '') + 
 
\t \t \t \t \t ' class="eupopup-button eupopup-button_2">' + _self.params.buttonLearnmoreTitle + '</a>' + 
 
\t \t \t \t '<div class="clearfix"></div>' + 
 
\t \t \t \t '</div>' + 
 
\t \t \t \t '<a href="#" class="eupopup-closebutton"><img src="/images/icons/svg/close.svg"></a>' + 
 
\t \t \t '</div>'; 
 

 
\t \t return html; 
 
\t }; 
 

 
\t // Storing the consent in a cookie 
 
\t var setUserAcceptsCookies = function(consent) { 
 
\t \t var d = new Date(); 
 
\t \t var expiresInDays = _self.params.agreementExpiresInDays * 24 * 60 * 60 * 1000; 
 
\t \t d.setTime(d.getTime() + expiresInDays); 
 
\t \t var expires = "expires=" + d.toGMTString(); 
 
\t \t document.cookie = _self.vars.COOKIE_NAME + '=' + consent + "; " + expires + ";path=/"; 
 

 
\t \t $(document).trigger("user_cookie_consent_changed", {'consent' : consent}); 
 
\t }; 
 

 
\t // Let's see if we have a consent cookie already 
 
\t var userAlreadyAcceptedCookies = function() { 
 
\t \t var userAcceptedCookies = false; 
 
\t \t var cookies = document.cookie.split(";"); 
 
\t \t for (var i = 0; i < cookies.length; i++) { 
 
\t \t \t var c = cookies[i].trim(); 
 
\t \t \t if (c.indexOf(_self.vars.COOKIE_NAME) == 0) { 
 
\t \t \t \t userAcceptedCookies = c.substring(_self.vars.COOKIE_NAME.length + 1, c.length); 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t return userAcceptedCookies; 
 
\t }; 
 
\t 
 
\t var hideContainer = function() { 
 
\t \t // $('.eupopup-container').slideUp(200); 
 
\t \t $('.eupopup-container').animate({ 
 
\t \t \t opacity: 0, 
 
\t \t \t height: 0 
 
\t \t }, 200, function() { 
 
\t \t \t $('.eupopup-container').hide(0); 
 
\t \t }); 
 
\t }; 
 

 
\t /////////////////////////////////////////////////////////////////////////////////////////////// 
 
\t // PUBLIC FUNCTIONS ////////////////////////////////////////////////////////////////////////// 
 
\t var publicfunc = { 
 

 
\t \t // INITIALIZE EU COOKIE LAW POPUP ///////////////////////////////////////////////////////// 
 
\t \t init : function(settings) { 
 

 
\t \t \t parseParameters(
 
\t \t \t \t $(".eupopup").first(), 
 
\t \t \t \t $(".eupopup-markup").html(), 
 
\t \t \t \t settings); 
 

 
\t \t \t // No need to display this if user already accepted the policy 
 
\t \t \t if (userAlreadyAcceptedCookies()) { 
 
\t \t \t \t return; 
 
\t \t \t } 
 

 
\t \t \t // We should initialise only once 
 
\t \t \t if (_self.vars.INITIALISED) { 
 
\t \t \t \t return; 
 
\t \t \t } 
 
\t \t \t _self.vars.INITIALISED = true; 
 

 
\t \t \t // Markup and event listeners >>> 
 
\t \t \t _self.vars.HTML_MARKUP = createHtmlMarkup(); 
 

 
\t \t \t if ($('.eupopup-block').length > 0) { 
 
\t \t \t \t $('.eupopup-block').append(_self.vars.HTML_MARKUP); 
 
\t \t \t } else { 
 
\t \t \t \t $('BODY').append(_self.vars.HTML_MARKUP); 
 
\t \t \t } 
 

 
\t \t \t $('.eupopup-button_1').click(function() { 
 
\t \t \t \t setUserAcceptsCookies(true); 
 
\t \t \t \t hideContainer(); 
 
\t \t \t \t return false; 
 
\t \t \t }); 
 
\t \t \t $('.eupopup-closebutton').click(function() { 
 
\t \t \t \t setUserAcceptsCookies(true); 
 
\t \t \t \t hideContainer(); 
 
\t \t \t \t return false; 
 
\t \t \t }); 
 
\t \t \t // ^^^ Markup and event listeners 
 

 
\t \t \t // Ready to start! 
 
\t \t \t $('.eupopup-container').show(); 
 

 
\t \t \t // In case it's alright to just display the message once 
 
\t \t \t if (_self.params.autoAcceptCookiePolicy) { 
 
\t \t \t \t setUserAcceptsCookies(true); 
 
\t \t \t } 
 

 
\t \t } 
 

 
\t }; 
 

 
\t return publicfunc; 
 
}); 
 

 
$(document).ready(function() { 
 
\t if ($(".eupopup").length > 0) { 
 
\t \t (new EuCookieLawPopup()).init({ 
 
\t \t \t 'info' : 'YOU_CAN_ADD_MORE_SETTINGS_HERE', 
 
\t \t \t 'popupTitle' : 'This site uses cookies to store information on your computer', 
 
\t \t \t 'popupText' : '', 
 
\t \t \t 'buttonLearnmoreTitle' : '' 
 
\t \t }); 
 
\t } 
 
}); 
 

 
}(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>

謝謝

來源

2015-12-07 michaelmcgurk

回答

1

如果我沒有理解好你的問題，你的函數hideContainer，您可以添加：

$('.nav').animate({ 
    'margin-top': 0 
}, 200);

，或者你可能已經直接設置的CSS屬性.nav：

top: 64px

並在您的JavaScript代碼中爲此屬性添加動畫。

來源

2015-12-07 10:26:42 ekqnp

+0

嗨@ekqnp謝謝你。我已經在這裏更新：http://jsfiddle.net/ox19egn4/7/這是一個夢幻般的答案。非常感謝！！！！ – michaelmcgurk

+0

我發現在關閉它並瀏覽網站後，我仍然有'margin-top：64px'應用於'.nav'。關閉欄後如何將其永久設置爲「0」？ – michaelmcgurk

+0

^@ekqnp的郵件:) – michaelmcgurk

2

我建議使用，當然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>

來源

2015-12-07 10:21:05

+0

太棒了！ 我必須保留我現在使用的代碼，但也許我可以將兩組代碼合併在一起:-) – michaelmcgurk

相關問題

 相關問題