Question

我有HTML：

var $button = $('#trigger');
    	var $to_top = $('#to_top');
    	$button.on('click', function() {
    		$to_top.slideToggle();
    	});

#to_top {
    	position: fixed;
    	bottom: 20px;
    	right: 20px;
    	background-color: #9B9EA0;
    	float: right;
    	width: 56px;
    	height: 56px;
    	fill: white;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="to_top">
    	<svg>
    		<path d="M16.652 37.273l13.102-12.045L42.86 37.273l3.796-2.563-16.902-15.534L12.858 34.71"/>
    	</svg>
    </div>
    <button id="trigger">FadeIt</button>

问题是当我点击按钮时没有任何反应。我的代码出了什么问题。

Answer 1

这应该可行，请注意您使用的幻灯片效果并不淡化。

$(document).ready(function() {
    var $button = $('#trigger');
    var $to_top = $('#to_top');
    $button.on('click', function() {
        $to_top.slideToggle();
    });
});

Answer 2

在文档“准备就绪”之前，无法安全地操作页面。 jQuery为您检测这种准备状态。包含在$（document）.ready（）中的代码只有在页面文档对象模型（DOM）准备好执行JavaScript代码后才会运行。包含在$（window）.load（function（）{...}）中的代码将在整个页面（图像或iframe）（而不仅仅是DOM）准备就绪后运行。

$(document).ready(function(){ 
  //Your code here
});

jQuery的fadeIn和fadeOut不起作用

2 个答案: