Response title
This is preview!
I have a serious problem with my jQuery events. All the jQuery events in my .js file are performed with serious delay (more than 4 seconds) after the event is triggered. Here's the code JSFiddle
$(document).ready(function() {
var headerWrap = $(".header-wrap");
var hOne = $("#header-section h1");
var buttonMenu = $("header button");
var menuSlide = $(".menu-slide");
var menuSlideAnchor = $(".menu-slide a");
menuSlideAnchor.on("click", function() {
$("button i").toggleClass("fa-reorder fa-times");
//menuSlide.slideToggle("200", "swing");
if (menuSlide.css("display") === "none") {
menuSlide.css("display", "block");
} else {
menuSlide.css("display", "none");
};
});
buttonMenu.on("click", function() {
$("header button i").toggleClass("fa-reorder fa-times");
//menuSlide.slideToggle("200", "swing");
if (menuSlide.css("display") === "none") {
menuSlide.css("display", "block");
} else {
menuSlide.css("display", "none");
};
});
<!--END Header Button-------------------------------------------------------------------------->
//WINDOW SCROLL Control <h1> and <nav.menu-slide>
$(window).scroll(function() {
//Prevent <h1> from fading out, in case that <nav.menu-slide> is displayed!
if ($(this).scrollTop() > 20) {
hOne.fadeOut(100, "swing");
menuSlide.css("margin-top", "80px");
} else if ($(this).scrollTop() <= 20) {
menuSlide.css("margin-top", "140px");
hOne.fadeIn(200, "swing");
}
});
//END WINDOW SCROLL
});
to my website.The delay in the code execution is detected only on iOS safari mobile browsers! The events that cause the delay are $("button").on("click"), %(window).resize() and $("a").on("click"). Could you please advise me on possible solutions.
Thank You.
© 2013 jQuery Foundation
Sponsored by and others.