小编Aar*_*iba的帖子

尝试h3通过jquery将标题向右滑动到此滑块.此滑块默认具有淡入淡出效果,我正在尝试将slideRight效果赋予h3滑块标题.

HTML:

<div id="headslide">
    <ul>
        <li class="post-content">
            <div class="slidshow-thumbnail">
                <a href="#">
                    <img src="http://3.bp.blogspot.com/-h4-nQvZ5-VE/VQ3HLtSS3ZI/AAAAAAAABIc/iaOda5zoUMw/s350-h260-c/girl_with_winter_hat-wallpaper-1024x768.jpg" height="260" width="350"/>
                </a>
            </div>
            <span class="content-margin">
                <p>Cicero famously orated against his p...</p>
                /* Title */
                <h3><a href="#">Download Premium Blogger Templates</a></h3>
                <span class="info">Info</span>
            </span>
        </li>

        <li class="post-content">
            <div class="slidshow-thumbnail">
                <a href="#">
                    <img src="http://3.bp.blogspot.com/-YfkF1u_VB40/VWr5dYf00gI/AAAAAAAABW8/wv2e-Lu4etw/s390-h340-c-h340-c/11071467_807062866056131_872486685669967339_n.jpg" height="260" width="350"/>
                </a>
            </div>
            <span class="content-margin">
                <p>SEO friendly Flat style Custom Fonts.</p>
                /* Title */
                <h3><a href="#">Modern with a pixel-perfect eye</a></h3>
                <span class="info">Info</span>
            </span>
        </li>
    </ul>
</div>

我试过这个
$(".content-margin").delay(400).show("h3", …

添加和删​​除类时尝试添加滑动过渡效果.尝试下面的粘性导航js:

lastScroll = 0;
$(window).on('scroll',function() {    
    var scroll = $(window).scrollTop();
    if(scroll === 0){
        $(".nav").removeClass("darkHeader");
    } else if(lastScroll - scroll > 0) {
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    }
    lastScroll = scroll;
});

我的尝试:

lastScroll = 0;
$(window).on('scroll',function() {    
    var scroll = $(window).scrollTop();
    if(scroll === 0){
        $(".nav").removeClass("darkHeader", 1000, "easeInOutQuad");
    } else if(lastScroll - scroll > 0) {
        $(".nav").addClass("darkHeader", 1000, "easeInOutQuad");
    } else {
        $(".nav").removeClass("darkHeader", 1000, "easeInOutQuad");
    }
    lastScroll = scroll;
});

我正在尝试添加1000, "easeInOutQuad",试图通过没有CSS3的jquery来做到这一点(请不要css).
问题 …

我.click(function()只是在第一次点击时尝试执行,但它总是在点击时执行.

当点击它的作品.more-post-button将添加类loading来.main ul并show-more-post以.main li该删除后级loading上的setTimeout功能7秒.

JS:

$(".more-post-button").click(function () {

  $('.main ul').addClass('loading');
  $('.main li').addClass('show-more-post');
  setTimeout(function(){
    $('.main ul').removeClass('loading');
  },7000);

});

我的问题是如何只在第一次点击时这样做,而不是每次点击.
提前致谢.

ScrollTop是一个jquery插件(转到页面顶部),试图使Scroll Speed变慢,但不能正常工作.我已经改变了scrollSpeed : 'fast',,scrollSpeed : 'slow',但它仍然很快,没有任何改变.

JS:

$.fn.extend({

    addScrollTop: function(options) {

        var defaults = {
                useObjWindow : false,
                scrollSpeed : 'fast',
                zIndex: '99'
            }

            var options = $.extend(defaults, options);  

        if($('body').find('.scrollTop-btn').length == 0) {
            $('body').append('<div class="scrollTop-btn" style="display:none;"><i class="fa fa-chevron-up"></i></div>');
        }

        if(options.useObjWindow) {
            var parentWindow = this;
            var scrollWindow = this;
        }
        else {
            var parentWindow = window;
            var scrollWindow = 'html, body';
        }

        $(document).ready(function() {

            $('.scrollTop-btn').on('click', function() {
                $(scrollWindow).animate({scrollTop:0}, options.scrollSpeed);
            });

            $(parentWindow).scroll(function() { 
                $('.scrollTop-btn').hide();
                var …

我正在尝试更改CSS动画关键帧,它正在反弹Y轴方向,但我试图将其更改为X轴意味着尝试从左到右或从右到左反弹.

小提琴: http ://jsfiddle.net/5y8ebfcw/

HTML:

<div class='thisone'></div>

CSS:

.thisone {
-webkit-animation-name: slybounce;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-moz-animation-name: slybounce;
-moz-animation-duration: 3s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
}


@-webkit-keyframes slybounce {
  0% {
    -webkit-transform: translate(0, -5);
  }
  50% {
    -webkit-transform: translate(0, 5px);
  }
  100% {
    -webkit-transform: translate(0, -5);
  }
}

@-moz-keyframes slybounce {
  0% {
    -moz-transform: translate(0, -5);
  }
  50% {
    -moz-transform: translate(0, 5px);
  }
  100% {
    -moz-transform: …

我已经编写了几行jQuery来隐藏/显示单击的许多元素,它正在工作.但问题是; 我有更多的图像类项目,所以我的脚本会很长,我的问题是如何简化或缩短我的脚本,我的意思是任何替代或任何新的想法？请建议.

HTML:

<div id="choose-color">
<span>
 <i class="images-red" style="">Red Image</i>
  <i class="images-blue" style="display: none;">Blue Image</i>
   <i class="images-pink" style="display: none;">Pink Image</i>
 <!-- many many images -->
</span>

 <button class="red">Red</button>
  <button class="blue">Blue</button>
   <button class="pink">Pink</button>

</div>

JS: 现场演示 >

$("button.red").click(function(){
    $(".images-red").show();
    $(".images-blue, .images-pink").hide();
});
$("button.blue").click(function(){
    $(".images-red, .images-pink").hide();
    $(".images-blue").show();
});
$("button.pink").click(function(){
    $(".images-red, .images-blue").hide();
    $(".images-pink").show();
});

请建议我的脚本的简短代码.谢谢.

我正在使用OWL Carousel，尝试<div class="item">在每次滑动时将类添加到当前项目。

JS：

$(document).ready(function() {

$("#owl-demo").owlCarousel({
items : 4,
lazyLoad : true,
navigation : true
});

});

HTML：

<div id="owl-demo" class="owl-carousel">
    <div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"></div>
</div>

尝试过（不起作用）：

$(document).ready(function() {

   $("#owl-demo").owlCarousel({
      items : 4,
      lazyLoad : true,
      navigation : true,
      afterAction: function(elem){
          $(elem).addClass("curent");
      }
   });

});

每次滑动时如何添加班级当前项目？

我找到了相关的答案，但与这个主题不一样，所以我问了这个问题。

我的问题是，我试图将图像文件名替换default.jpg为hqdefault.jpg下面的所有图像，我无法手动更改图像链接，所以我必须通过 jquery 更改它。

图片

<div id="selector">
    <img src="http://img.youtube.com/vi/qDc_5zpBj7s/default.jpg">
    <img src="http://img.youtube.com/vi/ss7EJ-PW2Uk/default.jpg">
    <img src="http://img.youtube.com/vi/ktd4_rCHTNI/default.jpg">
    <img src="http://img.youtube.com/vi/0GTXMEPDpps/default.jpg">
</div>

JS 我试过了

$('#selector img').attr('src',function(i,e){
    return e.replace("default.jpg","hqdefault.jpg");
});

问题是它更改（删除）到 的整个链接hqdefault.jpg，但我只想更改 default.jpg为hqdefault.jpg所有/任何图像源。

如何简单替换所有图片文件名？

例子

<img src="http://img.youtube.com/vi/qDc_5zpBj7s/default.jpg">
to
<img src="http://img.youtube.com/vi/qDc_5zpBj7s/hqdefault.jpg">

不要在js上使用完整的图像链接，因为视频会动态生成图像链接/id，只需用jquerydefault.jpg替换即可。hqdefault.jpg

尝试仅突出显示当前/单个文本,例如浏览器"Control-F"键盘命令搜索.当再次搜索好时,找到下一个/新文本.但它突出了所有结果,试图仅突出显示当前结果/文本.

JS下面:

$('body').on('keydown', '#searchfor', function(e) {
    if (e.which === 32 &&  e.target.selectionStart === 0) {
      return false;
    }  
});

//Create some vars to later check for: 
//['text you are searching', 'number of highlights','actual highlight']
var searching,
    limitsearch,
    countsearch;

$('button#search').click(function() {
    var searchedText = $('#searchfor').val();
    var page = $('#ray-all_text');

    //Now check if the text on input is valid
    if (searchedText != "") {
        //If the actual text on the input is different from the prev search
        if(searching != searchedText) {
            page.find('span').contents().unwrap(); …

尝试将类添加到父div（<div class="widget-content">如果.widget-content li a具有特定的类）.ifthis。

HTML：

<div class="widget-content">
<ul>
<li><a href="https://twitter.com/slycolor" class="ifthis"> <b>This Text Should Red</b></a>
</li>

<li><a href="https://www.facebook.com/slycolor" class="ifthis"> <b>This Text Should Red</b></a>
</li>
</ul>
</div>

我已经试过了：

$('.widget-content li a').has('.ifthis').parent('.widget-content').addClass('social-sidebar'); 

但没有工作，看到这个例子小提琴。

（我发现几个问题但没有答案，所以我问了问题） 输入/键入日期时
如何在<input>框中添加自动斜杠/符号？
示例：当输入02或任何日期，月份，年份数字时，jQuery将在输入框中的2个数字后自动添加/符号，例如02/12/2016
请检查jsfiddle示例：https ://jsfiddle.net/rjkdd9j6/

HTML：

<input type="text" id="your-id" value="dd/mm/yy">

jQuery或JS有什么简单的解决方案吗？