Как запустить скрипт при загрузке страницы?

этот скрипт рисует линию сверху вниз, но ее начинается с мыши на «onhover», и я хочу, чтобы она рисовала ее при открытии страницы.Как запустить скрипт при загрузке страницы?

Это код, который должен быть ясен. Единственное, что он делает, чтобы быть функциональным, - наведите курсор из этой строки $(this).hover(function().

var animationDuration = "0.4" 
var backgroundColor = "white" 

$.fn.line = function liner(animationDuration, borderWidth, side, backgroundColor) { 
    var className = "line" 
    var timePerSide = animationDuration 

    $(this).append('<div class=' + className + '> <div></div> </div>'); 

    $(this).children("." + className).css({ 
     "-webkit-transition": "all " + timePerSide + "s linear " + timePerSide * 0 + "s", 
     "transition": "all " + timePerSide + "s linear " + timePerSide * 0 + "s", 
     "background-color": backgroundColor, 
    }); 

    switch (true) { 
     case side == "right": 
      $(this).children(".line").css({ 
       "top": "0", 
       "right": "-10", 
       "height": "0%", 
       "width": borderWidth, 
      }); 
    } 

    if (side == "right") { 
     $(this).hover(function() { 
      $(this).children(".line").css({ 
       "height": "150%", 
      }); 
     }); 
    } 
};

И это мой HTML

<body> 
<div class="box1 float-left liner"> 
<h1>Lorem</h1> 
</div> 
</body> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.liner').line(animationDuration, "5px", "right", backgroundColor); 
    }); 
    </script> 
</html>

источник

2014-11-13 Marius Hincu

Теперь кажется, что вы используете плагин jQuery. Это немного изменило ситуацию. Тем не менее, я до сих пор не знаю, каков этот вопрос. – isherwood

Ну, это начинается, только если я иду с помощью мыши над «Lorem», и я хочу начать загрузку на странице –

Это звучит, как вы хотите игнорировать функцию парения и просто запустить часть плагина на нагрузке. Вам придется изменить плагин, который может и не быть идеей. Вместо этого:

if (side == "right") { 
    $(this).hover(function() { 
     $(this).children(".line").css({ 
      "height": "150%", 
     }); 
    }); 
}

... просто это сделать:

if (side == "right") { 
    $(this).children(".line").css({ 
     "height": "150%", 
    }); 
}

Если вам нужен код для запуска на обоих событий, вы можете вытащить внутреннюю часть из в имени функции и вызовите его для обоих:

function setLineHeight(els) { 
    $(els).children(".line").css({ 
     "height": "150%", 
    });  
}

... и затем:

if (side == "right") { 
    $(this).hover(function() { 
     setLineHeight(this); 
    }); 

    setLineHeight(this); // called when the plugin is initialized (on document.ready) 
}

источник

2014-11-13 18:01:30 isherwood

вы пробовали эту версию? потому что, если я использую первый метод, он будет скрывать всю строку и не будет отображаться здесь. вторая показана строка, но не рисуется –

Я еще не пробовал код. Я не уверен, как бы с тех пор, как вы не предоставили скрипку или другую демоверсию. – isherwood

http://jsfiddle.net/dcfmnr7s/1/ посмотреть здесь –

Как запустить скрипт при загрузке страницы?

ответ

Смежные вопросы