2017-11-26 8 views
0

자바 스크립트를 사용하여 div를 아래로 밀어 Notice으로 표시합니다. 그러나 나는 그것이로드시 깜박 거리고 자극이 아주 부드럽지 않다는 것을 알게됩니다. 이 문제를 해결할 방법이 있습니까? slideDown(1000);을 추가하여 부드럽게 만들 수 있습니다. 깜박임이 없지만 모든 페이지에서 slideDown을 원하지 않습니다. 깜박 거리지 않고 표시되기를 원합니다.스크립트 깜박임 방지

Live test

아이디어?

#fixed { 
    position: relative; 
} 

#notice { 
    background: #31384a; 
    color: #FFF; 
    padding: 5px; 
    position: fixed; 
    z-index: 999912312399; 
    width: 100%; 
    top: 0; 
    font-weight: 400; 
    font-size: 12px; 
    text-align: center; 
    display: none; 

    .exit { 
     position: absolute; 
     right: 10px; 
     top: 5px; 
     cursor: pointer; 

     img { 
      width: 10px; 
      height: 10px; 
     } 
    } 
} 

JS

var clearCookie = function() { 
    var result = $.removeCookie('JSFiddleCookieNotification'); 
    if (result) { 
     alert('Cookie removed, please reload.'); 
    } else { 
     alert('Error: Cookie not deleted'); 
    } 
}; 

var closeCookie = function() { 
    $("#notice").slideUp(400, function(){ 
     $(this).remove(); 
    }); 
    $('#fixed').animate({ 
     top: 0 
    }, 400); 
    $.cookie('JSFiddleCookieNotification', 'Notified', { 
     expires: 7 
    }); 
}; 

// Bind the buttons 
$("#clearCookie").on("click", clearCookie); 
$(".exit").on("click", closeCookie); 



// Now display the cookie if we need to 
if ($.cookie('JSFiddleCookieNotification') == null) { 
    $('#notice').show(); 

    var timer = setInterval(function() { 
     $('navmenu, navmenu-mobile, #fixed').css({ 
      top: $('#notice').outerHeight() 
     }); 
     if ($('#notice').outerHeight() == $('#fixed').css('top')) { 
      clearInterval(timer); 
     } 
    }, 10); 
} 

답변

0

내가 모든 코드를 읽을 수있는 기회를 확보하지,하지만 간단한 수정에 사업부를 아래로 슬라이드 것, 기본적으로 slideDown(0)

를 사용하는 것 0 밀리 초, 이는 .show()과 동일한 결과를 얻을 수 있지만 깜박임을 멈추게합니다.

+0

답장을 보내 주셔서 감사합니다. 그러나 작동하지 않는 것 같습니다. 서비스 사이드 쿠키를 사용하지 않고 Shopify를 사용하므로 클라이언트 측에 있습니다. 나는 .slideDown (0)을 추가했다. 대신 .Show(); –

+0

이해가 안됩니다, .slideDown (0); 클라이언트 쪽입니다. 나는 서버 사이드 쿠키를 언급하지 않았다. – OneStig