Question

我第一次在这里问一个问题，但我有问题......

您可以在这里找到HTML：

 <aside class="aside-smart">            


           <ul class="nav-asside">                    
                <li><a href="about.html" class=" l-aside-link" id="about">About</a>  </li>
                <li><a href="work.html" class="l-aside-link color-animate"   id="work">Work</a></li>
                <li><a href="contact.html" class="l-aside-link"   id="contact">Contact</a></li>
                <li><a href="#" class="icon-twitter l-aside-link"></a></li>
                <li><a href="#" class="icon-behance l-aside-link"></a></li>            
            </ul>
   <aside>

JavaScript的：

$(document).ready(function(){


$("#about").click(function(){

        event.preventDefault();
        console.log("ok");          

    $("aside").animate({left:'0'},1000,function(){

       // window.location=$("#about").attr("href");
          window.location = "about.html";       

        });         
    });
});

在CSS中，我说我离开了屏幕左侧40％，位置固定（对网站的其余部分有用）。所以我认为CSS没有错。

我想做什么：

当我点击其中一个链接（关于或工作或联系）时。除此之外首先去＆＃34;左= 0＆＃34;然后转到原始网址。

我如何进行

所以一开始我开始放event.preventDefault，然后我要求jQuery定位＆＃34;旁边＆＃34;移动到左= 0然后转到URL。

我在控制台中没有错误...但是当我点击其中一个链接时，它没有做动画。

如果我评论window.location行，那么动画可以移动到一边没有问题。但我不会去URL ...

所以我不明白问题出在哪里......？我的控制台没有错误？

我也是jQuery的初学者，所以答案很简单。至少如果有一种正确的方式来写这个＆＃34;链接comportement＆＃34;我很想知道它。

非常感谢您的回复：）

度过愉快的一天。

Answer 1

按照评论中的建议在函数中传递事件确实有效。

原文myfunkyside：如果您使用event.preventDefault();，那么在函数中将事件作为参数提供是一种很好的做法：$("#about").click(function(e){e.preventDefault();});（使用＆＃39; e＆＃39;而不是＆＃ 39; event＆＃39;，但显然没有必要）

Fiddle

修改澄清效果缓慢：

- 与css过渡造成冲突，导致动画出现口吃或未显示。

从css中删除转换将加速动画，但动画不能顺利运行。

aside { 
    position: fixed; 
    overflow: hidden; 
    z-index: 500; 
    width: 20%; 
    height: 100%; 
    background: #1a1a1a; 
    /*-webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out;*/ 
}

完整的代码编辑以提高动画效果：

aside { 
    position: fixed; 
    overflow: hidden; 
    z-index: 500; 
    width: 20%; 
    height: 100%; 
    background: #1a1a1a; 
    -webkit-transition: all 2s ease-in-out; 
    -moz-transition: all 2s ease-in-out; 
    -o-transition: all 2s ease-in-out; 
    transition: all 2s ease-in-out; 
}

更改main.js：

$("#aside").animate({left:0},2000, function(){
    //window.location=$("#contact").attr("href");
    window.location = "contact.html";   
});

到

$("#aside").css({left:0});
setTimeout( function() {
    window.location = "contact.html";
}, 2000);

动画后的window.location

1 个答案: