jQuery动画导航栏不工作ie

时间:2015-05-13 14:56:17

标签: jquery internet-explorer

嗨 - 我底部有一个导航栏。当#controls-wrapper有一个mouseenter时,这个元素slideDown。此外还有一个回调来调整另一个pageelement,所以我不会被导航栏覆盖。我在browserstack上测试了脚本,它适用于firefoxes,safaris和chromes,但不适用于Internet Explorer。在IE中没有任何反应。 有什么特定的东西要考虑IE和我的代码错了吗?谢谢你的关注。关于theo

// Place this in your viewController
- (IBAction)changed1:(id)sender{
    CGPoint hitPoint = [sender convertPoint:CGPointZero toView:self.tableView]; 
    NSIndexPath *hitIndex = [self.tableView indexPathForRowAtPoint:hitPoint];
    // Now you know exactly which segmented control actually fired this action. 
}

// Set self as the target
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    //
    [cell.segmentMeating addTarget:self action:@selector(changed1:) forControlEvents:UIControlEventValueChanged];
    //
}

#control-wrapper和#controls的css

/*animated Navbar at the bottom*/
$(function() {
var speed = 400;
var $window = $(window);
$('#controls').hide();

if ($window.width() > 640) {

$('#controls-wrapper').mouseenter(function() {
    $('#controls').stop().slideDown(speed,'easeInQuad', function(){
    $(".page-id-16 .textcol, .page-id-42
    .textcol").stop().animate({marginBottom: "31px"}, speed );
    });
    });

$('#controls').mouseleave(function() {

    $(this).stop().delay(2000).slideUp(speed,'easeInQuad', function(){
    $(".page-id-16 .textcol, .page-id-42
    .textcol").stop().animate({marginBottom: "-31px"}, speed);
    });
    });
    }
else{

    $('#controls').hide();
    $('#controls-wrapper').mouseenter(function() {
    $('#controls').stop().slideUp(speed,'easeInQuad');
    });
    }
});

1 个答案:

答案 0 :(得分:0)

解决方案很简单。 Internet Explorer(8,9,10甚至可能更高,未确认)无法识别仅定义区域但缺少背景颜色或其他内容的元素。当我为元素#controls-wrapper分配背景颜色时,我的效果很好。

可能的解决方法: 使用不可见的元素

填充区域#controls-wrapper
#controls-wrapper {
    width: 100%;
    height: 35px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: url(rgba.php?name=black&a=00) repeat;//invisible
 }

提供元素的php: https://github.com/LeaVerou/rgba.php/blob/master/rgba.php

使用此解决方法,问题中显示的jquery代码可以正常工作。 但是,可能有更好的解决方案。 祝你好运