标签: slidetoggle
JQuery slideToggle问题
确定有一个明显的答案,但我不知道.我使用JQuery动态加载页面.load()在"加载"页面上有一个表单元素的表单,例如input type="number"(HTML5).
是否有任何理由为什么如果我slideToggle()表单元素总是回复到表单,input type="text"如果我toggle()- (只是toggle())元素保持"真"同样如果我添加toggle('slow')表单元素总是回复到input type="text"
好."page1"上的HTML代码如下所示:
<form method="post" id="frmcreate">
<ol></ol>
<input type="submit" id="testit" />
</form>
它像这样加载到这个 - 是的doc ready()等.
$('ul#fieldtypes li a').click(function(){
var id_timestamp = new Date().getTime();
var id = $('.inputlength').length;
$( "#frmcreate ol" ).append('<li id='+id_timestamp+' class="inputlength"></li>');
$('#'+id_timestamp).load('test1.php?y='+id);
return false;
});
这是加载的表单
Type <input type="text" name="fieldmeta<?php echo $y; ?>[type]" /> <?php echo $error; ?>
<br/>
Name <input type="text" name="fieldmeta<?php echo $y; ?>[name]" value="<?php echo $y; ?>" …推荐指数
解决办法
查看次数
jquery - slideToggle不顺利
我的slideToggle功能有问题jQuery.它根本不光滑.每当我点击"查看更多"按钮时,应该slideToggle弹出的内容不会产生任何影响.
这是HTML代码:
<td class="third">
<a href="javascript:void(0)" class="btn btn-primary upgrade1">See More</a>
</td>
<tr class="see_more" id="see_more">
<td colspan="3" class="see_more_content">Hello! How are you doing</td>
</tr>
这是CSS:
.third{
text-align:right;
padding-right:10px;
}
.see_more{
display:none;
}
.see_more_content{
text-align:center;
}
最后,javascript:
<script type="text/javascript">
$(document).ready(function(){
$(".upgrade1").click(function() {
$("#see_more").slideToggle("slow");
});
});
</script>
我读过文章"动画跳转 - 快速提示",但我认为这不是问题所在.因为我没有指定任何margin或padding应该的内容slideToggle.
在此先感谢您的帮助.
推荐指数
解决办法
查看次数
面板应从底部向上滑动并向上推动内容,不得覆盖
我对jQuery很新,但我几乎可以肯定我想要实现的目标是可能的.
我有一个页面,导航栏固定在底部.导航栏有一个按钮,可以切换一个额外的面板,我想从底部向上滑动.这是我到目前为止:http://jsfiddle.net/E4yGh/
如您所见,面板向上滑动到页面的其余部分,该页面保持不变.我想要的是让页面的其余部分向上滚动以显示面板.页面应该根据面板的高度精确向上滚动div,以便面板的底部固定在页面的底部 - 理想情况下,无需指定面板的高度,以便自动调整.
我该怎么做呢？
推荐指数
解决办法
查看次数
SlideToggle和Callback,我做错了什么还是这个bug？
我有一个带有四个项目按钮的页面,当用户点击这些按钮时,内容应该是slideDown.
如果它已经是可见内容,则必须将该内容滑出,然后将正确的内容向下滑动.
一切正常,但如果用户在项目按钮之间快速点击,幻灯片就会卡住并开始出现在其他内容之上.
这是一个例子:http: //jsfiddle.net/7t6Eh/42/
如果用户点击项目之间的"慢",一切正常.
- 重新创建错误单击项目按钮之间的快速.
我已经尝试使用'.is(":visible")'但得到了相同的结果.
谁能帮我吗？
码
var active = 0;
$("#item1").click(function(){
if (active == 0){
$("#ContentList1").stop().slideToggle(function() {
active = 1;
});
} else {
if (active != 1){
$("#ContentList" + active).stop().slideToggle(function() {
$("#ContentList1").stop().slideToggle(function() {
active = 1;
});
});
}
}
});
$("#item2").click(function(){
if (active == 0){
$("#ContentList2").stop().slideToggle(function() {
active = 2;
});
} else {
if (active != 2){
$("#ContentList" + active).stop().slideToggle(function() {
$("#ContentList2").stop().slideToggle(function() {
active = 2;
});
});
}
}
}); …推荐指数
解决办法
查看次数
jquery滑动侧栏从左到右
我正在尝试创建一个具有类似效果的滑动侧栏
- www.wookmark.com
- http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm.
这是我写代码的距离.但这是生涩的.
- 任何人都可以提出更好的解决方案与aniamtions/easing/toggle等
- 我希望代码独立于左参数,即$("#slide").css("left"," - 150px"); 它应该能够以各种div宽度滑入/滑出
有任何想法吗 ？
CSS
#slide{
border:1.5px solid black;
position:absolute;
top:0;
left:0;
width:150px;
height:100%;
background-color:#F2F2F2;
layer-background-color:#F2F2F2;
}
HTML
<div id="slide" style="left: -150px; top: 0px; width: 160px;">
<p>Something here</p>
</div>
jQuery的
<script>
jQuery(document).ready(function() {
$('#slide').mouseover(function() {
$("#slide").css("left", "0px");
});
$('#slide').mouseout(function() {
$("#slide").css("left", "-150px");
});
});
</script>
推荐指数
解决办法
查看次数
jQuery slideToggle:最后跳跃
刚刚为.slideToggle写了一些"阅读更多... /阅读更少...",问题是在幻灯片结束时,动画"跳",因为缺乏更好的描述.同样,当幻灯片再次启动时.有什么建议？
编辑:我正在使用Chrome
<div class="details">
<p>I am an excerpt.</p>
<span class="show">Read More...</span>
<div class="info">
<p>the info to show in here......</p>
</div>
</div> <!-- details -->
<div class="details">
<p>I am an excerpt.</p>
<span class="show">Read More...</span>
<div class="info">
<p>Some different info to show in here......</p>
</div>
</div> <!-- details -->
$(document).ready(function (){
$(".info").hide();
$(".show").click(function(event) {
$(this).parent(".details").children("div.info").slideToggle(300);
$(this).text($(this).text() == 'Read More...' ? 'Read Less...' : 'Read More...');
});
});
谢谢!
推荐指数
解决办法
查看次数
Ion.RangeSlider 2.0.3
我正在尝试使用Ion.RangeSlider 2.0.3
网址:http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html
所以我想用三种颜色修改那个滑块.左,中,右同样.我已附上此图片以了解我想要的内容.
所以我需要你的帮助来自定义这个滑块.
谢谢.
推荐指数
解决办法
查看次数
Android：点击按钮后布局动画，最低 SDK 版本为 14
如何在最低 SDK 版本 14 应用程序中实现与 Android 完全相同的效果？
- 背景效果
- 滑动切换按钮
- 我的 minSDKVersion 是 14
看起来像背景上的圆形放大动画，还是有更具体的功能？
非常感谢...
推荐指数
解决办法
查看次数
jQuery SlideToggle（从中间点切换）
我正在使用slideToggle();方法，它有效，我只想从图像的中间点滑入和滑出，而不是向上滑到左角。我也不想要 ZoomIn 或 ZoomOut 事件。
$(document).ready(function() {
$('.btn').click(function() {
$('img').stop().slideToggle(5000);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="btn btn-default">My Button</button>
<br><br><br>
<img class="img-responsive" src="http://news.stanford.edu/news/2012/september/images/online_keyboard_news.jpg">推荐指数
解决办法
查看次数
导入后“mat-slide-toggle”不是已知元素
我正在尝试<mat-slide-toggle>Click me!</mat-slide-toggle>在已经MatSlideToggleModule导入的组件中使用，但我仍然收到消息，表明它不是已知元素。
角度版本：8.0.1
HTML 页面 (slide-page.html)
<div class="grid-slide-toggle-material">
<mat-slide-toggle>Click me!</mat-slide-toggle>
</div>
模块 (slide-page.module.ts)
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialModule } from 'projects/authenticator/src/shared/modules/material.module';
import { BasicModule } from 'src/app/shared/modules/basic/basic.module';
import { MatButtonToggleModule, MatButtonToggleGroup } from '@angular/material';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
@NgModule({
declarations: [],
imports: [
MaterialModule,
ReactiveFormsModule,
CommonModule,
FormsModule,
MatButtonToggleModule,
MatSlideToggleModule
]
})
export class SlidePageModule { } …推荐指数
解决办法
查看次数