这是我的代码
$(function() {
$("#product_content").hide();
$("#about").on("click", function() {
$("#home_content").hide();
$('#product_content').show("slide", { direction: "right" }, 1000);
});
});
当我点击它时会显示内容。但滑动效果对我不起作用 我包含了这些jQuery UI
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
这是我的HTML代码。当我点击我们的菜单时，它会加载页面，但滑动效果不起作用。
<div id="wrapper">
<header>
<div class="topheader">
<i class="fa fa-bars" aria-label="Skip to main navigation" aria-hidden="true" id="open-menu"></i>
<div id="dd-menu" class="dd-menu level-1" data-button="#open-menu">
<div class="dd-menu-header">
<button class="dd-menu-prev">←</button>
<a class="dd-menu-title logo1"><img src="img/logoh.png"/></a>
<div class="dd-menu-close"><img class="dd-menu-close" src="images/close.png"></div>
</div>
<div class="dd-menu-section"></div>
<div class="dd-menu-items-container">
<div class="dd-menu-items open">
<div class="dd-menu-item link">
<a href="index.html" id="home">
</i><b>HOME</b></a>
</div>
<div class="dd-menu-item link" id="about">
<a href="#" data-submenu="submenu-one"><b>ABOUT US</b></a>
</div>
<div class="dd-menu-item link">
<a href="#"><b>INFRASTRUCTURE</b></a>
</div>
<div class="dd-menu-item link">
<a href="#" id="product"><b>PRODUCTS</b></a>
<ul class="sub-menu">
<a href="product.php">FIBER FLOOR MAT</a>
<a href="#">PPF FLOOR MAT</a>
<a href="#">JUTE FLOOR MAT</a>
<a href="#">RUBBER FLOOR MAT</a>
<a href="#">COIR FLOOR MAT</a>
</ul>
</div>
<div class="dd-menu-item link">
<a href="#"><b>KNOWLEDGE CENTER</b></a>
</div>
<div class="dd-menu-item link">
<a href="#"><b>CONTACT US</b></a>
</div>
<ul class="clearfix horizontal_list social_icons" style="list-style-type: none;padding-top: 27%;padding-left: 27%;">
<li class="facebook m_bottom_5 relative">
<span class="tooltip tr_all_hover r_corners color_dark f_size_small">Facebook</span>
<a href="https://www.facebook.com/" class="r_corners t_align_c tr_delay_hover f_size_ex_large">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="twitter m_left_5 m_bottom_5 relative">
<span class="tooltip tr_all_hover r_corners color_dark f_size_small">Twitter</span>
<a href="https://twitter.com/" class="r_corners f_size_ex_large t_align_c tr_delay_hover">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="google_plus m_left_5 m_bottom_5 relative">
<span class="tooltip tr_all_hover r_corners color_dark f_size_small">Twitter</span>
<a href="https://plus.google.com/" class="r_corners f_size_ex_large t_align_c tr_delay_hover">
<i class="fa fa-google-plus"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="logo"><a href="index.html"><img src="img/logoh.png"></a>
</div>
</div>
</header>
<!-- /header -->
<div id="home_content">
<div id="main_slider" class="owl-carousel owl-theme">
<li class="col-md-12 col-sm-12 col-xs-12" style="background-image: url(images/people.jpeg);background-size: cover;background-position: center center; margin-top: 80px; height: 580px;list-style: none; padding-left: 0%" alt="Cinelli">
<div class="transparent_1"><h2 class="mycontent content1">OMEGA RUBBER PRODUCTS</h2>
<div>
<p class="sldrcontent">Omega manufactures a complete line of production solutions<br>that meet the strict demands of today's marketplace</br> </p>
</div>
<div>
<a class="menu_open"> <button name="button" id="open-menu" class="btt3 btt32 btt-responsive">MORE</button></a>
</div>
</div>
</li>
<li class="col-md-12 col-sm-12 col-xs-12" style="background-image: url(images/cinelli-front.jpeg); background-size: cover;background-position: center center;margin-top: 80px; height: 580px;list-style: none;padding-left: 0%" alt="Cinelli"><div class="transparent_1"><h2 class="mycontent content2">OMEGA FLOOR MATS<span style="color:transparent;">j</span></h2>
<div>
<p class="sldrcontent">Every step that we take is a step forward based on our Quality Management System</br></p>
</div>
<div>
<a class="menu_open"> <button name="button" id="open-menu" class="btt3 btt32 btt-responsive">MORE</button></a>
</div>
</div>
</li>
<li class="col-md-12 col-sm-12 col-xs-12" style="background-image: url(images/surly13.png);background-size: cover;background-position: center center;margin-top: 80px; height: 580px;list-style: none;padding-left: 0%" alt="Cinelli"><div class="transparent_1"><h2 class="mycontent content3">HIGH-TECH INFRASTRUCTURE</h2>
<div>
<p class="sldrcontent">With great envision Omega quickly adapt the latest technologies and<br> deliver functionally superior products</br></p></div>
<div>
<a class="menu_open"> <button name="button" id="open-menu" class="btt3 btt32 btt-responsive">MORE</button></a>
</div>
</div>
</li>
</div>
</div>
<div id="product_content">
<div id="product_slider" class="owl-carousel owl-theme">
<img src="images/IMG1.jpg">
<img src="images/IMG2.jpg">
<img src="images/IMG3.jpg">
<img src="images/IMG4.jpg">
<img src="images/IMG5.jpg">
</div>
答案 0 :(得分：1)
$(document).ready(function() {
$("#product_content").hide();
$("#about").on("click", function() {
$("#home_content").hide();
$('#product_content').show("slide", { direction: "right" }, 2000);
});
}); <html>
<head>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</head>
<body>
<p id="product_content">By default hidden</p>
<p id="home_content">home_content</p>
<button id = "about"> about</button>
<div class = "target">
</div>
</body>
</html>
希望它能帮到你